官网地址 vue-qr - npm 

 vue有两种生成二维码的方式，qrcode、vue-qr（有icon可以加图片）

安装插件

npm install vue-qr --save

引用方式

// vue2.0
import VueQr from 'vue-qr'// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{components: {VueQr}
}

页面代码

{{gameInfo.name}}:{{gameInfo.code}}

js代码

/*** 生成二维码* @param classId* @param row* @returns {Promise}*/
const classIdMarkDev = ref(false) //二维码弹框显示
const gameInfo = ref({}) //二维码内容
const logoSrc = ref({}) //图片地址
const contentValue = ref({}) //二维码内容jsonlet quickMark = async (classId, row) => {console.log(row)// console.log(row.ID)//数据gameInfo.value = {gameId: row.ID,name: row.name,code: row.code,creationTime: parseInt(new Date().getTime() / 1000)}classIdMarkDev.value = true//延迟加载等DOM元素加载完再执行nextTick(() => {logoSrc.value = quickMarkLogoUrl.value//二维码数据，扫描二维码后拿到的内容contentValue.value = JSON.stringify(gameInfo.value)console.log('content',contentValue)})
}

效果：