快捷導(dǎo)航

vue項(xiàng)目中使用qrcodesjs2生成二維碼簡(jiǎn)單示例

更新時(shí)間：2023年05月25日 14:56:48 作者：無(wú)知的小菜雞

最近項(xiàng)目中需生成二維碼,發(fā)現(xiàn)了很好用的插件qrcodesjs2,所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用qrcodesjs2生成二維碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

vue項(xiàng)目中使用qrcodesjs2生成二維碼

安裝

npm i qrcodejs2 -S

html

<!-- 放置二維碼的容器,需要給一個(gè)ref -->
 <div v-for="(item,i) in qrcode" :key="i">
 	<div id="qrcode" :ref="qrcode[i]"></div>
 <div>

項(xiàng)目中需要打印多個(gè)二維碼，而且這樣更加通用無(wú)論打印單個(gè)還是多個(gè)都可以

js

// 生成二維碼
   printTwoCode(width) {
       for (let j in this.qrcode) {
           let code = this.qrcode[j]; // 二維碼內(nèi)容
           new QRCode(this.$refs[`${this.qrcode[j]}`][0], {
               text: code,
               render: 'canvas',
               width: width,
               height: width,
               colorDark: '#000000',
               colorLight: '#ffffff'
           });
       }
   },

清除

for (let j in this.qrcode) {
       this.$refs.qrcode[j][0].innerHTML = ''
  }

使用

this.$nextTick(() => {
     this.printTwoCode(130);
 });

附：使用qrcodejs2生成多個(gè)二維碼

首先安裝qrcodejs2

然后引用 import QRCode from 'qrcodejs2'

<div class="box">
? ? <div v-for="(item, index) in list" class="boxscod" :key="index">
? ? ? <div :id="`code${item.id}`" :ref="`code${item.id}`" class="qrcode">
? ? ? </div>
? ? ? <div class="abc">
? ? ? ? ? <span class="cargo-wrap">{{ item.id }}</span>
? ? ? ? ? <span class="cargo-cardNo">{{ item.idCard }}</span>
? ? ? ? </div>
? ? </div>
? </div>
return {
? ? ? list: [
? ? ? ? { id: '01', idCard: 15336 },
? ? ? ? { id: '02', idCard: 18528 },
? ? ? ? { id: '03', idCard: 78542 },
? ? ? ? { id: '04', idCard: 46824 }, ?
? ? ? ],
? ? };
mounted() {
? ? this.showCode();
? },
? methods: {
? ? creatQrCode(id, code) {
? ? ? console.log(code);
? ? ? console.log(typeof code);
? ? ? var qrcode = new QRCode(id, {
? ? ? ? text: encodeURI(code), // 需要轉(zhuǎn)換為二維碼的內(nèi)容
? ? ? ? width: 70,
? ? ? ? height: 70,
? ? ? ? colorDark: "#000000",
? ? ? ? colorLight: "#ffffff",
? ? ? ? // correctLevel: QRCode.CorrectLevel.H,
? ? ? });
? ? ? console.log(qrcode);
? ? },
? ? // 展示二維碼
? ? showCode() {
? ? ? // ? this.closeCode()
? ? ? this.$nextTick(() => {
? ? ? ? this.list.forEach((item) => {
? ? ? ? ? // ? if (item.type === 1 || item.type === 2) {
? ? ? ? ? this.creatQrCode("code" + item.id, item.idCard);
? ? ? ? ? // ? }
? ? ? ? });
? ? ? });
? ? },
? },