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