Vue|利用VUE生成二维码（两种方式）二维码|qrcode|vue-qr|vue

利用Vue生成二维码

Author：kak

【Vue|利用VUE生成二维码（两种方式）】vue有两种生成二维码的方式，qrcode、vue-qr（有icon）；
1、qrcode

npm ``install` `--save qrcodejs2 //所需页面导入 import QRCode from 'qrcodejs2'

> import QRCode from 'qrcodejs2' export default { data() { return { }, methods: { creatQrCode() { var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容 width: 100, height: 100, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H }) }, }, mounted() { this.creatQrCode(); }, };

文章图片

2、vue-qr

可以增加icon

npm install vue-qr --save import vueQr from 'vue-qr'

> export default { name: "qecode", data() { return { imageUrl: require("../img/logo.png"),//icon路径 } }, components: { vueQr }, }, }

文章图片

完整代码

> import QRCode from "qrcodejs2"; import vueQr from "vue-qr"; export default { data() { return { imageUrl: require("./sw.jpg"), }; }, components: { vueQr, }, methods: { creatQrCode() { var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容 width: 100, height: 100, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H, }); }, }, mounted() { this.creatQrCode(); }, }; scoped> .qrcode { display: inline-block; width: 132px; height: 132px; background-color: #fff; padding: 6px; box-sizing: border-box; }