基于jsbarcode封装的条形码生成组件

<template>
    <svg :class="className"></svg>
</template>

<script>
import JsBarcode from "jsbarcode";

export default {
    name: "barcode",
    // className 类名 codeData 生成条形码的数据 width 条形码宽度 height 条形码高度
    props: {
        className: {
            default: undefined,
            type: String,
        },
        codeData: {
            default: undefined,
            type: String,
        },
        width: {
            default: undefined,
            type: Number,
        },
        height: {
            default: undefined,
            type: Number,
        },
        displayValue: {
            default: false,
            type: Boolean,
        },
        
    },
    mounted() {
        this.$nextTick(() => {
            console.log(this.className, this.codeData);
            // 手动给类名添加上点，匹配下方元素选择器
            let tempClassName = `.${this.className}`;
            // 元素选择器,格式化文本,选项
            JsBarcode(tempClassName, this.codeData, {
                format: 'CODE128', // 指定使用的条形码类型
                width: this.width, // 指定条形码中单条竖线的宽度	
                height: this.height, // 指定条形码高度
                displayValue: this.displayValue, // 指定是否显示条形码文本	
            });
        });
    },
};
</script>