更新记录
1.0.0(2023-11-13)
下载此版本
1.0.0
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
使用方式
<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' |
二维码图片类型 |
示例代码
<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>