vue使用qrcodejs2-fix或者qrcodejs2插件生成二维码

1. vue2安装

npm i qrcodejs2

1.1. vue3安装

npm install qrcodejs2-fix

2. 组件中引入并封装成公共组件，vue3版

<template>
    <!-- 二维码生成 -->
    <div class="body-div">
        <div style="width: 100%;height: 100%;" :id="id" :ref="id"></div>
    </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, toRefs, computed, watch, onMounted, ref, Ref, createVNode } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import QRCode from 'qrcodejs2-fix'
//获取路由传递的参数
const route = useRoute()
const router = useRouter()
const props = defineProps({  // 可以拿到它的值
    id: {
        type: String,
        required: true
    },
    text: {  // 后端返回的二维码地址
        type: String,
        default: 'http://jindo.dev.naver.com/collie'
    },
    width: {
        type: String,
        default: '128'
    },
    height: {
        type: String,
        default: '128'
    },
    colorDark: {
        type: String,
        default: '#000000'
    },
    colorLight: {
        type: String,
        default: '#ffffff'
    }
})


// 定义数据
const state = reactive({
    qrCode: "",
})


const createQrcode = () => {
    document.getElementById(props.id).innerHTML = '';
    new QRCode(document.getElementById(props.id), {
        text: props.text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
        width: props.width, // 二维码宽度 （不支持100%）
        height: props.height, // 二维码高度 （不支持100%）
        colorDark: props.colorDark,
        colorLight: props.colorLight,
        correctLevel: QRCode.CorrectLevel.H,
    });
}

defineExpose({ createQrcode })


onMounted(() => {
    // userList().then(res => {
    //     console.log(res)
    // })
})


</script>

<style lang="less" scoped>
.body-div {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
</style>

2. 2组件中引入并封装成公共组件，vue2版

<template>
  <div style="width: 100%;height: 100%;" :id="id" :ref="id"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      qrcode: ''
    }
  },
  props: {
    id: {
      type: String,
      required: true
    },
    text: {  // 后端返回的二维码地址
      type: String,
      default: 'http://jindo.dev.naver.com/collie'
    },
    width: {
      type: String,
      default: '128'
    },
    height: {
      type: String,
      default: '128'
    },
    colorDark: {
      type: String,
      default: '#000000'
    },
    colorLight: {
      type: String,
      default: '#ffffff'
    }
  },
  watch: {
    text(newText) {
      this.createQrcode()
    }
  },
  mounted() {
    this.createQrcode()
  },
  methods: {
    createQrcode() {
      if(this.qrcode) {  // 有新的二维码地址了，先把之前的清除掉
        this.$refs[this.id].innerHTML = ''
      }
      this.qrcode = new QRCode(this.$refs[this.id], {
        text: this.text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
        width: this.width, // 二维码宽度 （不支持100%）
        height: this.height, // 二维码高度 （不支持100%）
        colorDark: this.colorDark,
        colorLight: this.colorLight,
        correctLevel: QRCode.CorrectLevel.H,
      })
    },
    // 制作另一个二维码
    updateCode() {
      this.qrcode.makeCode("http://naver.com")
    }
  }
}
</script>

3. 组件中使用，我的组件是全局注册所以直接引用即可，v2，v3都一样

 <Q-code id="qrCode" :text="state.link" :width="100" :height="100" ref="qrCode" />

4. 效果