Vue使用qrcodejs2-fix生成网页二维码

安装qrcodejs2-fix

npm install qrcodejs2-fix

核心代码

• 在指定父view中生成一个二维码
• 通过id找到父布局

	//通过id找到父布局let codeView = document.getElementById("qrcode")new QRCode(codeView, {text: "测试",width: 128,height: 128,colorDark: '#000000',colorLight: '#ffffff',})

• 删除父布局中的内容，防止生成多个重复的二维码

 //删除子元素while (codeView.firstChild) {codeView.removeChild(codeView.firstChild);}

完整代码

<script>
import QRCode from 'qrcodejs2-fix';export default {methods: {createQrCode() {let codeView = document.getElementById("qrcode")console.log("获取到codeview" + codeView)//删除子元素while (codeView.firstChild) {codeView.removeChild(codeView.firstChild);}new QRCode(codeView, {text: "测试",width: 128,height: 128,colorDark: '#000000',colorLight: '#ffffff',})}},mounted() {this.createQrCode()}
}</script><template><div class="qrcode" id="qrcode"></div>
</template><style scoped>
.qrcode {margin: auto;width: 125px;height: 125px;background: #d0d9ff;
}
</style>