1. vue2安装
npm i qrcodejs21.1. vue3安装
npm install qrcodejs2-fix2. 组件中引入并封装成公共组件，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. 效果
