vue3+ts使用二维码功能
1、下载依赖包。
npm install vue-qr --save
2、在main.ts文件中全局引入。
// 二维码
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
app.component('vueQr', vueQr)
3、在页面中使用。
<vue-qr
id="payQR"
:text="codeText"
:logoSrc="logoSrc"
:size="qrCodeWidth"
colorDark="#5559FF"
colorLight="#ffffff">
</vue-qr>
// 二维码
const codeText=ref('111')
const logoSrc = require('../../../assets/logo/logo.png')
const qrCodeWidth = ref(450)
注：logoSrc必须用require包裹，不然报错，二维码加载不出来。
遇到报错ReferenceError: require is not defined。是因为使用Vite做为开发构建工具，而Vite默认不支持使用require方式进行模块导入导出。
解决：使用vite-plugin-require-transform插件。
安装依赖包
npm install vite-plugin-require-transform
在vite.config.js文件中添加如下代码。
import requireTransform from "vite-plugin-require-transform";
plugins: [
requireTransform({
fileRegex: /.js$|.vue$/,
})
]
因为我使用的是ruoyi框架，最后修改如下：
plugins: [
createPlugins(env, command === 'build'),
requireTransform({
fileRegex: /.js$|.vue$/,
}),
]