vue-qr 二维码插件使用

特点：

1. 可设置二维码样式（logo图片、背景图片、背景颜色、尺寸、边距等）。
2. 支持下载

缺点：

1. 下载功能不支持IE

使用

1.安装

npm install vue-qr --save

 2.项目中使用

<template>
 <vue-qr :logoSrc="logo" :text="value" :size="200" :margin="0" :logoMargin="2" id="qrcode"></vue-qr>
<el-button type="primary" @click="savePic">保存图片</el-button>
</template>
 
<script>
import vueQr from 'vue-qr'
export default {
    components: {
        vueQr
    },
    data() {
        return {
            logo: require('../assets/bc.png'),
            value: 'https://www.baidu.com',
        }
    },
    methods: {
        savePic () {
          const iconUrl = document.querySelector('.qrcode img').src
          console.log(iconUrl)
          let a = document.createElement('a')
          let event = new MouseEvent('click')
          a.download = '百度'
          a.href = iconUrl
          a.dispatchEvent(event)
        }
    }
}
</script>

 

常用属性介绍

Parameter	Explanation
text	欲编码的内容
size	尺寸, 长宽一致, 包含外边距
margin	二维码图像的外边距, 默认 20px
colorDark	实点的颜色
colorLight	空白区的颜色
bgSrc	欲嵌入的背景图地址
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor	背景色
backgroundDimming	叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc	嵌入至二维码中心的 LOGO 地址
logoMargin	LOGO 标识周围的空白边框, 默认为0
logoBackgroundColor	Logo 背景色,需要设置 logo margin
logoCornerRadius	LOGO 标识及其边框的圆角半径, 默认为0
whiteMargin	若设为 true, 背景图外将绘制白色边框