目录
概要
构建展示的vue组件qrcode.vue
组件的使用
概要
项目中用到需要展示二维码的样式，想到了qrcode
例如：
前提：安装包
npm install qrcodejs2 --save构建展示的vue组件qrcode.vue
<template><div style="width: 100%;height: 100%;" :id="id" :ref="id"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {data() {return {qrcode: ''}},props: {id: {type: String,required: true},text: { // 后端返回的二维码地址type: String,default: 'M000001'},width: {type: String,default: '100'},height: {type: String,default: '100'},colorDark: {type: String,default: '#000000'},colorLight: {type: String,default: '#ffffff'}},watch: {text(newText) {this.createQrcode()}},mounted() {this.createQrcode()},methods: {createQrcode() {if(this.qrcode) { // 有新的二维码地址了，先把之前的清除掉this.$refs[this.id].innerHTML = ''}this.qrcode = new QRCode(this.$refs[this.id], {text: this.text, //页面地址 ,如果页面需要参数传递请注意哈希模式#width: this.width, // 二维码宽度 （不支持100%）height: this.height, // 二维码高度 （不支持100%）colorDark: this.colorDark,colorLight: this.colorLight,correctLevel: QRCode.CorrectLevel.H,})},// 制作另一个二维码updateCode() {this.qrcode.makeCode("http://naver.com")}}
}
</script>组件的使用
<template><div>/***item为二维码的内容*colorDark为前景色*/<QrCode :id="'QrCode'" :text="item" colorDark="#802126"/></div></template> <script> import QrCode from '../../components/QRcode/qrCode.vue' // 引用上面封装的二维码组件 export default { components: { QrCode },//注册组件}</script>
小结
这个组件还是相当好用的，多多推荐
