2021-02-19

Vue 二维码生成

1. 安装 qrcodejs2：npm install qrcodejs2 --save

2. 全局注册 main.js

import QRCode from 'qrcodejs2';

Vue.prototype.$qrCode = QRCode;

3. 在组件中引用

 createQrCode () {

          this.bindQRCode()

        },

        bindQRCode () {

             document.getElementById("qrCode").innerHTML = "";

            let qrCode = this.$qrCode

            new qrCode(this.$refs.qrCodeDiv, {

                text: 'https://www.baidu.com',

                width: 100,

                height: 100,

                colorDark: "#333333", //二维码颜色

                colorLight: "#ffffff", //二维码背景色

                correctLevel: qrCode.CorrectLevel.H//容错率，L/M/H

            })

        }

    },

注意点：要在生成前清空，不然会出现多次点击生成多个二维码

4. HTML代码

 <Button type="primary" size="small" @click="createQrCode">二维码生成</Button>

                <div class="img-container">

                    <div id="qrCode" ref="qrCodeDiv"></div>

                </div>

6.如果不想全局注册局部用，直接在用的组件中引入 import QRCode from 'qrcodejs2';