<template>
|
<div>
|
<svg class="barcode" />
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, watch, nextTick } from 'vue'
|
import JsBarcode from 'jsbarcode'
|
|
defineOptions({ name: 'Barcode' })
|
|
const props = defineProps({
|
// 数据
|
// 当前的值
|
value: String
|
});
|
|
const generateBarcode = () => {
|
JsBarcode('.barcode', String(props.value), {
|
format: "CODE39",//选择要使用的条形码类型
|
width:1,//设置条之间的宽度
|
height:40,//高度
|
displayValue:true,//是否在条形码下方显示文字
|
// text:"456",//覆盖显示的文本
|
// fontOptions:"bold italic",//使文字加粗体或变斜体
|
// font:"fantasy",//设置文本的字体
|
// textAlign:"left",//设置文本的水平对齐方式
|
// textPosition:"top",//设置文本的垂直位置
|
// textMargin:5,//设置条形码和文本之间的间距
|
fontSize:15,//设置文本的大小
|
// background:"#eee",//设置条形码的背景
|
// lineColor:"#2196f3",//设置条和文本的颜色。
|
margin:15//设置条形码周围的空白边距
|
});
|
}
|
|
onMounted(() => {
|
nextTick(() => generateBarcode())
|
})
|
|
watch(() => props.value, generateBarcode);
|
|
</script>
|
|
<style lang="scss" scoped>
|
</style>
|
