vue纯前端生成二维码的方法

利用qrcode插件

通过yarn 或者Npm的方式  yarn add qrcodejs2 --dev  或者  npm install --save qrcodejs2

安装之后可以选择全局引入Vue项目中 （在工程的main.js文件中引入）或者在各个vue文件中引入

import QRCode from 'qrcodejs2'

首先在Dom部分创建一个div

<div id="qrCodeUrl"></div>

之后写下css(我写的scss  其实都一样 没什么区别)

.qrcode{
    display: inline-block;
    img {
        width: 132px;
        height: 132px;
        background-color: #fff; //设置白色背景色
        padding: 6px; // 利用padding的特性，挤出白边
        box-sizing: border-box;
    }
  }

引入之后进行调用，首先创建一个调用函数：

creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'xxxx', // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#00FF00',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    }

之后在可以在任何事件或者vue生命周期钩子里面进行调用，我这里在mounted里面调用：

mounted() {

      this.creatQrCode();

  }

之后便可以显示出二维码了

颜色是可以切换的  我做了一个绿色的

切换效果在于这两个变量，可以尝试一下就知道显示情况了。