vue项目中实现的 一个简单的二维码生成例子
首先安装一下插件
npm install qrcodejs2 --save
然后尝试走通下面的业务
<template><div class="qrcode"><h1>生成二维码</h1><label for="text">请输入要转换为二维码的内容：</label><input type="text" id="text" v-model="text" @keyup.enter="generateQRCode" /><button @click="generateQRCode">生成</button><button @click="returnClear">清空</button><div ref="qrcode" style="margin: 0 auto" id="divdemo"></div></div>
</template><script>
import QRCode from "qrcodejs2";
export default {name: "QRCodeGenerator",data() {return {text: "",qrcode: null,};},methods: {generateQRCode() {if (this.qrcode != null) {this.qrcode.clear(); // 清除原来的二维码// 上面的清除方式无效，因此使用下面的强制清除let divdeom = document.getElementById("divdemo");divdeom.innerHTML = "";}this.qrcode = new QRCode(this.$refs.qrcode, {width: 256,height: 256,text: this.text,});},// 清除二维码以及输入框中的内容returnClear() {let divdeom = document.getElementById("divdemo");divdeom.innerHTML = "";this.text = "";},},
};
</script><style>
.qrcode input[type="text"] {width: 20%;padding: 10px;font-size: 18px;margin-bottom: 20px;
}.qrcode button {background-color: #4caf50;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;
}.qrcode button:hover {background-color: #45a049;
}.qrcode div {margin-top: 20px;
}button {margin: 10px;
}
</style>最后，如果上面的流程都能走通，那么，就可以按照自己项目的时机需求去再做开发了，至少生成二维码的功能已经实现了。
)
