60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<!-- components/BarcodeGenerator.vue -->
|
||
<template>
|
||
<div class="barcode-container">
|
||
<canvas v-if="type === 'canvas'" ref="barcodeRef"></canvas>
|
||
<svg v-else ref="barcodeRef"></svg>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, onMounted, defineProps, defineEmits } from 'vue';
|
||
import JsBarcode from 'jsbarcode';
|
||
|
||
// 定义Props（外部传参）
|
||
const props = defineProps({
|
||
value: { // 条形码内容
|
||
type: String,
|
||
required: true
|
||
},
|
||
format: { // 条形码格式
|
||
type: String,
|
||
default: 'CODE128'
|
||
},
|
||
type: { // 渲染类型
|
||
type: String,
|
||
default: 'canvas',
|
||
validator: (val) => ['canvas', 'svg'].includes(val)
|
||
},
|
||
options: { // 自定义配置
|
||
type: Object,
|
||
default: () => ({
|
||
width: 2,
|
||
height: 100,
|
||
displayValue: true
|
||
})
|
||
}
|
||
})
|
||
|
||
// 定义DOM引用
|
||
const barcodeRef = ref(null)
|
||
|
||
// 生成条形码
|
||
const generate = () => {
|
||
if (!barcodeRef.value) return
|
||
// 合并默认配置和外部配置
|
||
const finalOptions = { ...props.options, format: props.format }
|
||
// 清空Canvas（SVG无需清空）
|
||
if (props.type === 'canvas') {
|
||
const ctx = barcodeRef.value.getContext('2d')
|
||
ctx.clearRect(0, 0, barcodeRef.value.width, barcodeRef.value.height)
|
||
}
|
||
// 生成条形码
|
||
JsBarcode(barcodeRef.value, props.value, finalOptions)
|
||
}
|
||
|
||
// 挂载后初始化
|
||
onMounted(generate)
|
||
|
||
// 监听props变化，自动更新
|
||
watch([() => props.value, () => props.format, () => props.options], generate, { deep: true })
|
||
</script> |