Vue<生成二维码>

效果图

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


Vue<生成二维码>_第1张图片
image.png

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

首先:

npm install --s qrcode

引入

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

HTML片段

 
 

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地址
    }

有用到的话给个赞呗 !

你可能感兴趣的:(Vue<生成二维码>)