<template>
|
<qrcode-vue
|
v-if="hasValue"
|
:value="String(text)"
|
:size="size"
|
:margin="margin"
|
render-as="canvas"
|
/>
|
</template>
|
|
<script>
|
// vue-qr 的替代品。
|
//
|
// 老工程三处文件（business 的 productOrder / outsourcingFinishProduct/printDialog，
|
// 以及后面 CNAS 的 resourceDemand/device/component/files）用的是 `vue-qr`，它只支持
|
// Vue 2，无法在 Vue3 上运行。这里用 Vue3 的 qrcode.vue 重写一层，**沿用 vue-qr 的
|
// props 名（text / size / margin）**，调用点只需换 import 来源，模板一个字都不用改。
|
//
|
// 默认值对齐 vue-qr：size 200、margin 20（qrcode.vue 自己的默认是 100 / 0，
|
// 不覆盖的话那些没显式传 size 的地方尺寸会变小）。
|
import QrcodeVue from 'qrcode.vue'
|
|
export default defineComponent({
|
name: 'VueQr',
|
components: { QrcodeVue },
|
props: {
|
text: { type: [String, Number], default: '' },
|
size: { type: Number, default: 200 },
|
margin: { type: Number, default: 20 }
|
},
|
setup(props) {
|
// qrcode.vue 对空 value 会报警告。老工程里 getQrCodeText() 在数据缺失时可能返回
|
// ''，此时 vue-qr 也是渲染不出二维码的，所以这里直接不渲染，顺带保持控制台干净
|
// —— 阶段 3/4 靠"控制台零告警"发现漏改，不能被这类噪声干扰。
|
const hasValue = computed(() => props.text !== '' && props.text !== null && props.text !== undefined)
|
return { hasValue }
|
}
|
})
|
</script>
|
