vue --- 二维码生成

在vue中使用二维码需依赖qrcode.js插件，传送门：http://code.ciaoca.com/ /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//容错级别
      });
    }
  },

3.调用

在created中调用

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

在mounted中调用

  mounted() {
    this.qrcode();
  }

事件调用

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

结果