Vue<生成二维码>

效果图

(此二维码不可扫，不要尝试了)

image.png

实现前端生成二维码其实很简单，下插件就行了

首先:

npm install --s qrcode

引入

import QRCode from "qrcode"; //引入生成二维码插件

HTML片段

 <canvas id="QRCode"></canvas>
 <button  @click="getQRCode()">点击生成二维码</button>

data定义变量

 QRCodeMsg: "", //生成二维码信息

监听

  watch: {
    // 通过监听获取数据
    QRCodeMsg(val) {
      // 获取页面的canvas
      var msg = document.getElementById("QRCode");
      // 将获取到的数据（val）画到msg（canvas）上
      QRCode.toCanvas(msg, val, function(error) {
        console.log(error);
      });
    }
  },

方法

//生成分享二维码
    getQRCode() {
      this.QRCodeMsg = window.location.href;//生成的二维码为URL地址
    }

有用到的话给个赞呗 !