jsbarcode 封装，生成条形码

1. 下载依赖

npm install jsbarcode

2. 封装（封装后可以循环生成多个条形码，仅需要生成单个就直接用index.vue里的代码）

1. 在src/components路径下新建文件夹ever-barcode
   
2. index.vue代码

<template>
	
    <img :id="`barcode${index}_${date}`" />
template>

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

const props = defineProps({
    index: {
        type: Number, // 循环索引，需要唯一
    },
    value: {
        type: String,//条形码的值
        required: true,
    },
    width: {
        type: Number,//条之间的宽度
        default: 1,
    },
    height: {
        type: Number,//高度
        default: 40,
    },
    fontSize: {
        type: Number,//文本大小
        default: 15,
    },
    margin: {
        type: Number,//条形码周围的空白边距
        default: 0,
    },
    displayValue: {
        type: Boolean,//是否在条形码下显示内容
        default: true,
    },
})
const date = new Date().getTime()
onMounted(() => {
    nextTick(() => {
    	//进行条形码配置
        jsbarcode(`#barcode${props.index}_${date}`, String(props.value), {
            format: 'CODE39', //选择要使用的条形码类型
            width: props.width, //设置条之间的宽度
            height: props.height, //高度
            displayValue: props.displayValue, //是否在条形码下方显示文字
            fontSize: props.fontSize, //设置文本的大小
            margin: props.margin, //设置条形码周围的空白边距
        })
    })
})
script>

3. index.ts代码

import EverBarcode from './src/index.vue'
export { EverBarcode }
export default EverBarcode

3.页面中使用

<template>
	<div v-for="item in states.printData" :key="item.id" class="print_div">
		<EverBarcode
            :index="item.id"
            :displayValue="false"
            :height="50"
            :value="item.inventoryNo"
        >EverBarcode>
	div>
template>
<script lang="ts" setup>
import EverBarcode from '@/src/components/ever-barcode'//引入组件
script>