效果图
(此二维码不可扫,不要尝试了)
实现前端生成二维码其实很简单,下插件就行了
首先:
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地址
}
有用到的话给个赞呗 !