vue使用JsBarcode生成条形码

本文主要是介绍vue使用JsBarcode生成条形码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

        在工作中，有一个需求是接口返回的订单号生成条形码，如图：

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()})
}

这篇关于vue使用JsBarcode生成条形码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---