使用jsbarcode实现条码组件

1.JsBarcode安装

import JsBarcode from 'jsbarcode'
// 全局方法挂载
app.config.globalProperties.jsbarcode = JsBarcode    

 

2.Barcode组件定义

<template>
  <div>
    <svg class="barcode" ></svg>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import JsBarcode from 'jsbarcode'

const props = defineProps({
  // 数据
  // 当前的值
  value: String,
  option: String
});

onMounted(() => {
  nextTick(() => {
    JsBarcode('.barcode', String(props.value), {
  format: "CODE128",//选择要使用的条形码类型
  width:1.5,//设置条之间的宽度
  height:40,//高度
  displayValue:true,//是否在条形码下方显示文字
  text:props.value + " " + props.option,//覆盖显示的文本
//   fontOptions:"bold italic",//使文字加粗体或变斜体
//   font:"fantasy",//设置文本的字体
//   textAlign:"left",//设置文本的水平对齐方式
  // textPosition:"top",//设置文本的垂直位置
//   textMargin:5,//设置条形码和文本之间的间距
  fontSize:16,//设置文本的大小
//   background:"#eee",//设置条形码的背景
//   lineColor:"#2196f3",//设置条和文本的颜色。
  margin:10,//设置条形码周围的空白边距
   marginTop: 30
});
  })
})

watch(props,(newValue,oldValue)=>{
  console.log(newValue,oldValue);
  nextTick(() => {
    JsBarcode('.barcode', String(props.value), {
  format: "CODE128",//选择要使用的条形码类型
  width:1.5,//设置条之间的宽度
  height:40,//高度
  displayValue:true,//是否在条形码下方显示文字
  text:props.value + " " + props.option,//覆盖显示的文本
//   fontOptions:"bold italic",//使文字加粗体或变斜体
//   font:"fantasy",//设置文本的字体
//   textAlign:"left",//设置文本的水平对齐方式
  // textPosition:"top",//设置文本的垂直位置
//   textMargin:5,//设置条形码和文本之间的间距
  fontSize:16,//设置文本的大小
//   background:"#eee",//设置条形码的背景
//   lineColor:"#2196f3",//设置条和文本的颜色。
  margin:10,//设置条形码周围的空白边距
   marginTop: 30
});
  })
})

</script>

3.组件挂载

import Barcode from '@/components/Barcode'
app.component('Barcode', Barcode)

 

4.组件使用

<Barcode :value="form.orderNo" :option="form.checkType" ></Barcode>