1. install with NPM
npm install vue-qr --save
2. demo
<template>
<el-card class="channelBox" v-for="(item, index) in channels" :key="index" shadow="always" :body-style="{ padding: '0px' }">
<div class="channelHead">
<span class="channelId">{{item.channel_id}}</span>
<div class="channelName" @click="changeName(item)">{{item.channel_name}}</div>
</div>
<div class="channelQrcode" @click="bigQrcode(item)">
<vue-qr :text="item.channel_qr_url" :size="120" :margin="0"></vue-qr>
</div>
<div class="channelBtn">
<el-button @click="isDelete(item.channel_id)" type="text" style="color:#F56C6C;">删除</el-button>
<el-button type="text" style="color:#67C23A;" @click="downloadImg(index, item)">下载</el-button>
</div>
</el-card>
<script>
import vueQr from 'vue-qr'
export default {
components: {
vueQr
},
data() {
return {
channels: []
}
},
methods: {
// 下载渠道二维码图片
downloadImg (index, item) {
var oQrcode = document.querySelectorAll('.channelQrcode img') var url = oQrcode[index].src var a = document.createElement('a') var event = new MouseEvent('click') // 下载图名字 a.download = item.channel_name a.href = url // 合成函数，执行下载 a.dispatchEvent(event) } } } </script>
3. 常用属性介绍
| 属性 | 说明 |
| text | 二维码内容 |
| size | 二维码宽高大小，因为是正方形，所以设一个参数即可 |
| margin | 默认边距20px，不喜欢的话自己设为0 |
| colorDark | 实点的颜色，注意要和colorLight一起设置才有效 |
| colorLight | 空白的颜色，注意要和colorDark一起设置才有效 |
| bgSrc | 嵌入背景图地址，没什么卵用，不建议设置 |
| logoSrc | 二维码中间的图，这个是好东西，设置一下显得专业点 |
| logoScale | 中间图的尺寸，不要设太大，太大会导致扫码失败的 |
| dotScale | 那些小点点的大小，这个也没什么好纠结的，不建议设置了 |