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

news2024/9/20 23:07:42

安装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>