效果图:(不涂鸦,图片违规)
1、安装 vue-qr组件:
yarn vue-qr --save
或者
npm install vue-qr --save
2、页面挂载使用:(也可以在main.js全局挂载)
!!!单页面引入:
import vueQr from 'vue-qr';
export default {
components: {
vueQr
},
}
!!!全局挂载引入:
import VueQr from 'vue-qr'
new Vue({
components: {VueQr}
})
3、实现点击下载方法:
methods: {
download(sourceName) { //下载
//const iconUrl = this.$refs['qrCode' + sourceName].$el.src //2021年做项目写
const iconUrl = this.$refs['qrCode' + sourceName][0].$el.src //2023年修改
const a = document.createElement('a') //自定义a标签
const event = new MouseEvent('click') //自定义鼠标点击事件
a.download = sourceName
a.href = iconUrl
a.dispatchEvent(event) //触发自定义事件
},
}
4、案例代码:
<template>
<div class="row wraps">
<div class="column center" style="margin:12px;" v-for="(row,index) in DataList" :key="index">
<vue-qr :ref="'qrCode'+ row.sourceName" :logoSrc="row.logoSr" :text="row.text" :size="200"
:correctLevel='row.correctLevel'></vue-qr>
<div style="color: coral; cursor: pointer;margin-top: 10px;" @click="download(row.sourceName)">点击下载</div>
</div>
</div>
<!-- !!!!配置属性!!!!
text 编码内容
correctLevel 容错级别
size 尺寸, 长宽一致, 包含外边距
margin 二维码图像的外边距, 默认 20px
colorDark 实点的颜色
colorLight 空白区的颜色
bgSrc 欲嵌入的背景图地址
gifBgSrc 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor 背景色
backgroundDimming 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc 嵌入至二维码中心的 LOGO 地址
logoScale 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
logoMargin LOGO 标识周围的空白边框, 默认为0
logoBackgroundColor Logo 背景色,需要设置 logo margin
logoCornerRadius LOGO 标识及其边框的圆角半径, 默认为0
whiteMargin 若设为 true, 背景图外将绘制白色边框
dotScale 数据区域点缩小比例,默认为0.35
autoColor 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold (0 < threshold < 255) 二值化处理的阈值
callback 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
bindElement 指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE
-->
</template>
<script>
import vueQr from 'vue-qr';
export default {
components: {
vueQr
},
data() {
return {
DataList: [{
sourceName: '1001', //名编号
logoSr: 'https://gtms03.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_80x80.jpg', //二维码中间图片
text: 'https://blog.csdn.net/2201_75870706?type=blog', //编码内容
size: 200, //尺寸, 长宽一致, 包含外边距
correctLevel: 2, //容错级别
},{
sourceName: '1002', //名编号
logoSr: '', //二维码中间图片
text: 'https://blog.csdn.net/2201_75870706?type=blog', //编码内容
size: 220, //尺寸, 长宽一致, 包含外边距
correctLevel: 3, //容错级别
}]
}
},
methods: {
download(sourceName) { //下载
const iconUrl = this.$refs['qrCode' + sourceName][0].$el.src
const a = document.createElement('a') //自定义a标签
const event = new MouseEvent('click') //自定义鼠标点击事件
a.download = sourceName
a.href = iconUrl
a.dispatchEvent(event) //触发自定义事件
},
}
}
</script>
<style lang="scss" scoped>
</style>