vue.js如何生成条形码

1.下载插件

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

2.在main.js中引入插件

import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件
ue.component('barcode', VueBarcode);  //声明条形码组件
<div class="printOrder" v-for="(v,k) in list">
   <barcode :value="v.barcodes" :options="barcode_option" tag="svg" ></barcode>
</div>

//注意,要答应的内容不能出现汉字,否则显示不出来,可以有空格特殊字符等

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'}]
    }
  },

猜你喜欢

转载自blog.csdn.net/call_me_small_pure/article/details/79693711