使用qrcodejs2生成二维码:
1.安装引入qrcodejs2
npm install qrcodejs2 --save
2.全局配置
import QRCode from 'qrcodejs2'
Vue.prototype.$qrCode = QRCode;
3.使用qrcodejs2
<template>
<div>
{{ msg }}
<div id="qrCode" ref="qrCodeDiv"></div>
</div>
</template>
<script>
export default {
name: 'user',
data () {
return {
msg: '二维码'
}
},
mounted: function () {
//生命周期mounted 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。
//实例已完成以下的 配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。
this.$nextTick(function () {
this.checkOut();
})
},methods:{
checkOut:function(){
new this.$qrCode(this.$refs.qrCodeDiv, {
text: 'http://sinoeve.com',
width: 200,
height: 200,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: this.$qrCode.CorrectLevel.L//容错率,L/M/H
})
}
}
}
</script>
<style>
</style>
效果图: