<template>
    <div>
        <vue-barcode :value="text" :options="barcode_option" tag="svg"></vue-barcode>
    </div>
</template>

<script>
import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件
export default {
    name: 'barCode',
    components:{
        VueBarcode
    },
    props: {
        text: '',
        option: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            barcode_option: {
                displayValue: true, // 显示条形码文字
                format: 'CODE128', // 条形码编码方式
                width: '1px', // 单个条形码的宽度
                height: '30px', // 条形码高度
                fontSize: '12px', // 字体大小
                textAlign: 'center', // 文字对齐方式
                textPosition: 'bottom', // 文字垂直位置
                textMargin: 2, // 设置条形码和文本之间的间距
                background: "#fff", // 设置条形码的背景
                lineColor: "#000", // 设置条和文本的颜色。
                margin: 5, // 设置条形码周围的空白边距
                text: '', // 覆盖显示的文本
                // fontOptions: "bold italic", // 使文字加粗体或变斜体
                // font: "fantasy", // 设置文本的字体
            }
        }
    },
    watch: {
        option: {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
                this.barcode_option = {
                    ...this.barcode_option,
                    text: this.text,
                    ...newV || {}
                };
            }
        }
    }
}

</script>
