vue中生成条形码，以及条形码的所有参数

//安装条形码插件

npm install @xkeshi/vue-barcode

在main.js中引入

import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件
Vue.component('barcode', VueBarcode);  //声明条形码组件

 

<p class="printOrder" v-for="(v,k) in list">

   <barcode :value="v.barcodes" :options="barcode_option" tag="svg" ></barcode>

</p>//注意，要显示的内容不能出现汉字，否则显示不出来，可以有空格特殊字符等



data(){   

return{

      barcode_option:{

        displayValue: true, //是否默认显示条形码数据

        //textPosition  :'top', //条形码数据显示的位置

        background: '#fff', //条形码背景颜色

        valid: function (valid) {

          console.log(valid)

        },

        width:'1px',//单个条形码的宽度

        height: '55px',

        fontSize: '22px' //字体大小

    },

      list:[{barcodes:'A01-01-01'},{barcodes:'A01-01-01'}]

    }

  },

然后就可以啦，

 

另外，条形码的所有参数

format: "CODE39",//选择要使用的条形码类型

 width:3,//设置条之间的宽度

 height:100,//高度

 displayValue:true,//是否在条形码下方显示文字

 text:"456",//覆盖显示的文本

 fontOptions:"bold italic",//使文字加粗体或变斜体

 font:"fantasy",//设置文本的字体

 textAlign:"left",//设置文本的水平对齐方式

 textPosition:"top",//设置文本的垂直位置

 textMargin:5,//设置条形码和文本之间的间距

 fontSize:15,//设置文本的大小

 background:"#eee",//设置条形码的背景

 lineColor:"#2196f3",//设置条和文本的颜色。

 margin:15//设置条形码周围的空白边距

 

 

 

 

祝工作顺利，身体健康