推荐一款超级好用的 vue 二维码生成包

官网：vue-qr

引入二维码生成包

npm install --save vue-qr

vue中写法

附上简单操作

<template>
	<div style="text-align:center">
        <vue-qr :text="payUrl" :size="200" />
        <div>请使用支付宝扫码</div>
    </div>

</template>
 
<script>
import vueQr from 'vue-qr'
export default {
    components: {
        vueQr
    },
    data() {
        return {
        	//例如        	
            payUrl: '访问的扫码链接地址',
        }
    }
}
</script>

标签属性

参数	解释
text	欲编码的内容
correctLevel	容错级别 0-3
size	尺寸, 长宽一致, 包含外边距
margin	二维码图像的外边距, 默认 20px
colorDark	实点的颜色
colorLight	空白区的颜色
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
bgSrc	欲嵌入的背景图地址
backgroundColor	背景色