vue-qr生成二维码并下载
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 |
那些小点点的大小,这个也没什么好纠结的,不建议设置了 |