vue 项目中使用字符转条形码 亲测有效

1.先安装包
npm install jsbarcode --save

2.vue 项目中使用字符转条形码 亲测有效在template里面先存放容器 PS:使用div标签可能会报错,目前只有用svg标签可以正常。

3.import JsBarcode from 'jsbarcode' 在js里面导入包
4.在methods里面写下方法 方便调用(方法里面许多配置可以上网搜 主要配置条形码大小颜色等样式问题)

这里是引用 barcode () {
var JsBarcode = require(‘jsbarcode’)
let barCode=‘123456’
JsBarcode("#barcode", “Hi world!”, {
format: “CODE128”,//选择要使用的条形码类型
text: barCode, //显示文本
displayValue: true,//是否在条形码下方显示文字
width: “1px”, //条宽度
height: “50px”, //高度
textPosition: “bottom”,//设置文本的垂直位置
// fontOptions: “bold italic”,//使文字加粗体或变斜体
// background: “#eee”,//设置条形码的背景
// font: “fantasy”,//设置文本的字体
margin: 15//设置条形码周围的空白边距
})
},

5.调用方法:在index父组件页面 正常使用没问题,如果在created直接调用可能会报错 原因是dom渲染问题 可以在mounted调用这个方法 。如果是子组件需要在dom完成之后再调用 可以使用this.$nextTick(() => { this.barcode() })
来实现正常调用否则可能会报错。

以上。vue 项目中使用字符转条形码 亲测有效