Vue 生成带 logo 的二维码
安装 vue_qrcodes
npm install --save vue_qrcodes
使用 vue_qrcodes
页面引入
import qrcodes from "vue_qrcodes"
export default {
components: { qrcodes },
data() {
return {
codeLogo: require("@/projects/wisdomcommunity/assets/images/wisdomcommunity/menjin/code-logo.png"),
qrCodeText: '123456',
codeSize: '',
logoSize: '',
}
},
created () {
this.codeSize = document.documentElement.clientWidth * (200 / 375)
this.logoSize = document.documentElement.clientWidth * (32 / 375)
},
}
页面标签
<qrcodes
:url="qrCodeText"
:iconurl="codeLogo"
:wid="codeSize"
:hei="codeSize"
:imgwid="logoSize"
:imghei="logoSize"
/>
参数说明
Property | Description | Type | Accepted Values | Default |
---|---|---|---|---|
url | Values of Qrcode 二维码输入的内容 |
String | - | www.baidu.com |
iconurl | image of Qrcode 二维码中间小图片地址 |
String | - | https://cn.vuejs.org/images/logo.png |
wid | Qrcode width 二维码宽度 |
Number | - | 70 |
hei | Qrcode height 二维码高度 |
Number | - | 70 |
colorDark | Qrcode color 二维码颜色 |
String | - | #000000 |
colorLight | Qrcode background 二维码背景色 |
String | - | #ffffff |
imgwid | Qrcode image width 二维码中间小图片宽度 |
Number | - | 30 |
imghei | Qrcode image heigth 二维码中间小图片高度 |
Number | - | 30 |