vue項目使用qrcode插件生成二維碼
下載
npm i qrcodejs2 --save
導入
import QRCode from 'qrcodejs2'
使用
<div class="qrcode" ref="qrCodeDiv"></div> <script> import QRCode from 'qrcodejs2' export default { data() { return { }, methods: { bindQRCode() { this.$nextTick(() => { new QRCode(this.$refs.qrCodeDiv, { text: url,//url地址 文本等需要轉換為二維碼的內容 width: 80, height: 80, colorDark: "#333333", //二維碼顏色 colorLight: "#ffffff", //二維碼背景色 correctLevel: QRCode.CorrectLevel.L, //容錯率,L/M/H }); }); }, }, mounted() { this.bindQRCode(); }, }; </script>
清除
//清除二維碼 this.$refs.qrCodeDiv.innerHTML = "";
或者你還可以這么寫
var qrcode = document.getElementById("qrcode"); var qrcode = new QRCode(qrcode , { text: "https://www.baidu.com/", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H });
qrcode.clear(); // 清除. qrcode.makeCode("二維碼承載的信息"); // make another code.


浙公網安備 33010602011771號