//安装条形码插件
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//设置条形码周围的空白边距
祝工作顺利，身体健康
————————————————
版权声明：本文为CSDN博主「dakache11」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dakache11/article/details/83749410