96 lines
1.8 KiB
Markdown
96 lines
1.8 KiB
Markdown
|
## 使用方式
|
||
|
|
``` javascript
|
||
|
|
<yan-qr />
|
||
|
|
```
|
||
|
|
|
||
|
|
## 属性说明
|
||
|
|
|属性名 |类型 | 默认值 |说明 |
|
||
|
|
|-- |-- |-----------|-- |
|
||
|
|
|canvasId |String | 'qrcode' |canvas-id |
|
||
|
|
|text |String | 'hello' |二维码内容 |
|
||
|
|
|size |Number | 340 |单位是px |
|
||
|
|
|margin |Number | 0 |边距 |
|
||
|
|
|level |String | 'L' |二维码解析度L/M/Q/H |
|
||
|
|
|fColor |String | '#000000' |二维码颜色 |
|
||
|
|
|bColor |String | '#ffffff' |二维码背景颜色 |
|
||
|
|
|fileType |String | 'png' |二维码图片类型 |
|
||
|
|
|
||
|
|
## 示例代码
|
||
|
|
``` javascript
|
||
|
|
<template>
|
||
|
|
<view>
|
||
|
|
<view>
|
||
|
|
<view>
|
||
|
|
<view>需要转换的文本：</view>
|
||
|
|
<textarea v-model="content" @blur="inputText" placeholder="请在这里输入" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
二维码
|
||
|
|
<view>
|
||
|
|
<yan-qr :filePath.sync="filePath" :text="text" :margin="20" />
|
||
|
|
</view>
|
||
|
|
二维码图片地址
|
||
|
|
<view>
|
||
|
|
<textarea v-model="filePath" disabled />
|
||
|
|
</view>
|
||
|
|
<button @click='btn'>生成二维码</button>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
qrShow: false,
|
||
|
|
content: '',
|
||
|
|
filePath: '',
|
||
|
|
text: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
filePath() {
|
||
|
|
console.log(this.filePath);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
//*获取文本框内容*//
|
||
|
|
inputText: function(e) {
|
||
|
|
this.content = e.detail.value
|
||
|
|
},
|
||
|
|
|
||
|
|
//*按钮*//
|
||
|
|
btn: function() {
|
||
|
|
if (this.content == '') {
|
||
|
|
uni.showToast({ //显示对话框
|
||
|
|
title: "请输入文本",
|
||
|
|
icon: 'none',
|
||
|
|
duration: 1000,
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.text = this.content
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
textarea {
|
||
|
|
border: 1px solid #000000;
|
||
|
|
width: 98%;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
width: 80%;
|
||
|
|
margin-top: 180rpx;
|
||
|
|
border-radius: 25px;
|
||
|
|
color: aliceblue;
|
||
|
|
background-color: #55aaff;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
```
|