vue --- 二维码生成

在vue中使用二维码需依赖qrcode.js插件，传送门：http://code.ciaoca.com/javascript/qrcode/

1.npm安装

npm install qrcodejs2 --save

安装后package.json文件中的dependencies会生成2.2.

2.组件中引入

import QRCode from 'qrcodejs2'  

在methods中书写方法

  methods: {
    qrcode() {
      let qrcode = new QRCode(document.getElementById("qrcode"), {
        render: "canvas", //也可以替换为table
        text: "https://baidu.com",//内容
        width: 200, // 设置宽度
        height: 200, // 设置高度
        colorDark:'red',//背景色
        colorLight:'yellow',//前景色
        correctLevel : QRCode.CorrectLevel.H//设置二维码排错率，可选L(7%)、M(15%)、Q(25%)、H(30%)，排错率越高可存储的信息越少，但对二维码清晰度的要求越小
      });
    }
  },

3.调用

在created中调用

  created() {
    this.$nextTick (function () {
      this.qrcode();
    })
  },

在mounted中调用

  mounted() {
    this.qrcode();
  }

事件调用

<div id="qrcode"  @click="qrcode()">clickBtn</div>

结果