72 lines
3.8 KiB
Markdown
72 lines
3.8 KiB
Markdown
# uni-app 二维码生成器
|
||
|
||
### 使用方法
|
||
|
||
在 `script` 中引入组件
|
||
|
||
``` javascript
|
||
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
|
||
export default {
|
||
components: {tkiQrcode}
|
||
}
|
||
```
|
||
|
||
在 `template` 中使用
|
||
|
||
``` javascript
|
||
<view class="qrimg">
|
||
<tki-qrcode
|
||
ref="qrcode"
|
||
:cid="cid"
|
||
:val="val"
|
||
:size="size"
|
||
:unit="unit"
|
||
:background="background"
|
||
:foreground="foreground"
|
||
:pdground="pdground"
|
||
:icon="icon"
|
||
:iconSize="iconsize"
|
||
:lv="lv"
|
||
:onval="onval"
|
||
:loadMake="loadMake"
|
||
:usingComponents="usingComponents"
|
||
:showLoading="showLoading"
|
||
:loadingText="loadingText"
|
||
@result="qrR" />
|
||
</view>
|
||
```
|
||
|
||
### 属性
|
||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||
| :---------------: | :-----: | :-------: |:-------: |:-------------------------------------------------------------------:|
|
||
|cid|String|tki-qrcode-canvas| |canvasId，页面存在多个二维码组件时需设置不同的ID|
|
||
|size|Number|200| |生成的二维码大小|
|
||
|unit|String|upx| px |大小单位尺寸|
|
||
|show|Boolean|true| |默认使用组件中的image标签显示二维码|
|
||
|val|String|二维码| |要生成的内容|
|
||
|background|String|#000000| |二维码背景色|
|
||
|foreground|String|#ffffff| |二维码前景色|
|
||
|pdground|String|#ffffff| |二维码角标色|
|
||
|icon|String| | |二维码图标URL（必须是本地图片，网络图需要先下载至本地）|
|
||
|iconSize|Number|40<br/>注意此大小不会跟随二维码size 动态变化，设置时需注意大小，不要太大，以免无法识别| |二维码图标大小|
|
||
|lv|Number|3（一般不用设置）| |容错级别|
|
||
|onval|Boolean|false| |监听val值变化自动重新生成二维码|
|
||
|loadMake|Boolean|false| |组件初始化完成后自动生成二维码，val需要有值|
|
||
|usingComponents|Boolean|true| false |是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）|
|
||
|showLoading|Boolean|true| false |是否显示loading|
|
||
|loadingText|String|二维码生成中| |loading文字|
|
||
|
||
### 方法
|
||
|
||
| 方法名 | 参数 | 默认值 | 说明 |
|
||
|:------------:|:---:|:---:|------------------------------:|
|
||
| _makeCode() | | | 生成二维码 |
|
||
| _clearCode() | | | 清空二维码（清空二维码会触发result回调 返回值为空） |
|
||
| _saveCode() | | | 保存二维码到图库 |
|
||
|
||
### 事件
|
||
|
||
| 事件名 | 返回值 | 说明 |
|
||
|:-------|:------------------:|---------------------------:|
|
||
| result | 生成的图片base64或图片临时地址 | 返回二维码路径 注：_clearCode()后返回空 |
|