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()后返回空 |
|