在工作中,有一个需求是接口返回的订单号生成条形码,如图:
1.安装依赖
yarn add jsbarcode
2.引入
在script标签中引入
import JsBarcode from 'jsbarcode'
3.使用
this.$refs.a.src的值为条形码的地址。
<template><div><img ref="a" id="barcode" /></div>
</template><script>
import JsBarcode from 'jsbarcode'
export default {data(){return{text: '5236585455673698548'}},mounted() {this.getCode()},methods: {getCode(){JsBarcode('#barcode', this.text, {height: 65,fontSize: 13,});console.log(this.$refs.a.src)}}
}
</script><style scoped></style>
4.问题
在实际开发中,条形码的内容是后端返回的,当获取到二维码内容后,立即生成二维码,会有以下错误:
这是由于生成条形码时,节点还未创建,读取不到 id 为 barcode 的节点。解决这个报错的方法就是使用 this.$nextTick方法
getData() {······this.$nextTick(() => {this.getCode()})
}