Vue移動端H5生成二維碼功能（qrcodejs2）

相信大家都遇到或是做過生成二維碼的功能需求，現在針對vue移動端方法作簡單介紹

1、安裝、引用二維碼插件

# 通過 npm 安裝    npm i qrcodejs2

# 通過 yarn 安裝   yarn add qrcodejs2

項目中的引用

import QRCode from 'qrcodejs2'

2、View層

<div class="code">
    <span>消費碼：<font color="#F35C18">{{currentCoupon.closerNumber}}</font></span>
    <span style="float:right;" @click="handleQRCode(currentCoupon)"><img src="/img/QRcode.png" alt=""></span>
</div>
<van-popup v-model="QRCodeShow" @click-overlay="overlay">
    <div class="qrBox tc">
        <p class="mb10">消費碼：{{currentCoupon.closerNumber}}</p>
        <div class="qr tc" ref="qrcodeContainer"></div>
        <p class="tip mt10"><i class="mr5"></i>出示消費碼，供商家覈銷訂單</p>
    </div>
</van-popup>

3、methods（數據處理）

• handleQRcode()   生成二維碼中的攜帶的參數QRText（根據自己的項目需求）
• crateQrcode()   插件中的生成二維碼（text二維碼參數，寬高、二維碼顏色、背景顏色）
• overlay()    用的是vant彈框的方法，點擊模態框清空內容（避免再次點擊二維碼重複生成）