相信大家都遇到或是做过生成二维码的功能需求，现在针对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弹框的方法，点击模态框清空内容（避免再次点击二维码重复生成）