一、JsBarcode
- 安装：
npm install jsbarcode --save
- 引入：在需要生成条形码的页面引入即可
import JsBarcode from 'jsbarcode'
- 需要显示条形码的页面里
<img id="barcode1">
- 调用构造函数生成条形码
let barCode1 = this.info.marIdCode;
let barheight = this.imgHeight;
JsBarcode("#barcode1",barCode1,{
format:"CODE128", // 条形码的格式
width:1, // 线宽
height:barheight, // 条码高度
lineColor:"#000", // 线条颜色
displayValue:false, // 是否显示文字
margin:2 // 设置条形码周围的空白区域
})
二、vue-barcode
vue-barcode 是JsBarcode的简单包装
npm install vue-barcode
npm install @xkeshi/vue-barcode
- 两个版本区别
版本一：只能单独绑定属性
引入：在需要生成条形码的页面引入即可
import VueBarcode from 'vue-barcode'
new Vue({
components: {
'barcode': VueBarcode
}
})
<barcode :value="barcodeValue" :width="7" :height="200"></barcode>
版本二：可直接options绑定所有属性
引入：在需要生成条形码的页面引入即可
import VueBarcode from '@xkeshi/vue-barcode'
new Vue({
components: {
'barcode': VueBarcode
}
})
<barcode :value="barcodeValue" :options="{ width:100 , height:100}">
条形码显示失败时的内容
</barcode>
