Vue——生成二维码

1. 使用qrcodejs2依赖

//加载依赖
cnpm i -S qrcodejs2

//引入模块
import vueQr from "qrcodejs2";
或

//使用
qrcode = new vueQr("qrcode", {
	text: "https://www.baidu.com",//要生成二维码的地址
	width: 128,//二维码宽
	height: 128,//二维码高
	colorDark: "#000000",//二维码颜色
	colorLight: "#ffffff",//二维码底色
});
//切换二维码地址
qrcode.makeCode("http://1314.com")

2. 使用vue-qr依赖

//加载依赖
cnpm i -S vue-qr

//引入模块
//Vue2
import VueQr from 'vue-qr'
//Vue3
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
//使用
components: {vueQr}

<vueQr text="https://www.baidu.com" :size="200"></vueQr>

属性：

参考文档：https://www.npmjs.com/package/vue-qr

属性	备注
text	生成二维码的地址
size	二维码尺寸
logoSrc	嵌入至二维码中心的 LOGO 地址
logoScale	LOGO尺寸，数值范围：0.1~0.9
margin	外边距
colorDark	二维码颜色
colorLight	二维码背景色(不包含外边距)
bgSrc	二维码背景图片地址
gifBgSrc	二维码背景Gif图片地址
backgroundColor	二维码背景色(包含外边距)
backgroundDimming	叠加在背景图上的颜色
…	更等参数请看文档