vue中生成條形碼
阿新 • • 發佈:2018-12-19
//安裝條形碼外掛
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'}] } },
然後就可以啦,