1. 程式人生 > >vue中生成條形碼

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

    }

  },

然後就可以啦,