Fix Bug: 条码更新问题

eight

2024-12-02 a90276a242ddca6f45e234c5cc4832a7a01a7e03

 src/components/Barcode/src/Barcode.vue

@@ -6,7 +6,7 @@

<script lang="ts" setup>

import { ref, onMounted, nextTick } from 'vue'
import { ref, onMounted, watch, nextTick } from 'vue'
import JsBarcode from 'jsbarcode'

defineOptions({ name: 'Barcode' })
@@ -17,26 +17,31 @@
  value: String
});

onMounted(() => {
  nextTick(() => {
    JsBarcode('.barcode', String(props.value), {
      format: "CODE39",//选择要使用的条形码类型
      width:1,//设置条之间的宽度
      height:40,//高度
      displayValue:true,//是否在条形码下方显示文字
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,//设置文本的大小
    fontSize:15,//设置文本的大小
//   background:"#eee",//设置条形码的背景
//   lineColor:"#2196f3",//设置条和文本的颜色。
      margin:15//设置条形码周围的空白边距
    });
  })
    margin:15//设置条形码周围的空白边距
  });
}

onMounted(() => {
  nextTick(() => generateBarcode())
})

watch(() => props.value, generateBarcode);

</script>

<style lang="scss" scoped>