使用vue-qr生成二维码

npm安装

npm install vue-qr --save

页面使用组件

<vue-qr :correctLevel="3" :autoColor="false" colorDark="#5a9144" 
:logoSrc="logoSrc" :text="codeUrl" :size="200" :margin="0"></vue-qr>

---

js代码

//引入vue-qr
import VueQr from 'vue-qr'
export default {
	data() {
		return {
			//二维码中间的图
			logoSrc: require('@/assets/logo.png'),
			//text的内容
			codeUrl: ''
		}
	},
	created() {
		this.seeQR()
	},
	methods: {
		seeQR() {
			//跳转某个网页并携带参数
			this.codeUrl = '这里是网页地址/#/?id='+'VueJose'
		},
	},
	components: {
		VueQr
	}
}

---

vue-qr参数配置*

待补充完整

text size 参数 为必填

参数	说明	默认值	备注
text	编码内容	string	"https://www.baidu.com/"填写网址会跳转到此页面。"VueJose"会显示此内容。必填
size	二维码尺寸	number	长宽一致, 包含外边距。必填
margin	二维码图像的外边距	number	默认 20
colorLight	空白区的颜色	string
colorDark	实点的颜色	string
colorLight	空白区的颜色	string
correctLevel	容错级别
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