vue.js生成条形码的方法

时间：2020-11-27 来源：乌哈旅游

本文主要和大家分享vue.js生成条形码的方法，主要以代码的形式和大家分享，希望能帮助到大家。

1.下载插件

npm install @xkeshi/vue-barcode //下载条形码插件

2.在main.js中引入插件

import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件ue.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'}]
 }
 },