JsBarcode条形码组件封装

负责的项目中有需要生成条形码的需求，并且在多个页面都有使用，所以将这个功能封装成了组件，方便使用。

第一步：在项目中安装JsBarcode库

我们在项目路径下安装JsBarcode库，安装完成后我们可以在node_modules目录下找到它。

npm install JsBarcode --save

第二步：封装组件

话不多说，直接上代码，这个组件可以在vue项目中直接使用，可以按照自己需要进行修改。

在我测试过程中，如果条形码宽度（width）设为1px的话不能扫描出来，所以将默认值改为了2px，其他默认值是我在项目中使用到的合适的数值，可以根据需要修改或者在使用时传入。

<template>
  <div>
    <canvas class="vue-barcode-element" v-show="valid"></canvas>
    <div v-show="!valid">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  let JsBarcode = require('jsbarcode');
  export default {
    name: "JsBarcode",
    props: {
      value: [String, Number],
      //选择要使用的条形码类型
      format: [String],
      //设置条之间的宽度
      width: {
        type:[String, Number],
        default:"2px"
      },
      height: {
        type:[String, Number],
        default:"36px"
      },
      //覆盖显示的文本
      text: [String, Number],
      //使文字加粗体或变斜体
      fontOptions: [String],
      //设置文本的字体
      font: [String, Number],
      //设置文本的水平对齐方式
      textAlign: [String],
      //设置文本的垂直位置
      textPosition: [String],
      //设置条形码和文本之间的间距
      textMargin: [String, Number],
      //设置文本的大小
      fontSize: {
        type:[String, Number],
        default:"14px"
      },
      //设置条和文本的颜色
      lineColor: [String],
      //设置条形码的背景
      background: {
        type:[String],
        default:"rgba(0,0,0,0)"
      },
      //设置条形码周围的空白边距
      margin: [String, Number],
      marginTop: [String, Number],
      marginBottom: [String, Number],
      marginLeft: [String, Number],
      marginRight: [String, Number],
      //是否在条形码下方显示文字
      displayValue: {
        type: [String, Boolean],
        default: true
      }
    },
    data (){
      return {
        valid: true
      };
    },
    mounted (){
      this.$watch('$props', this.render, { deep: true, immediate: true });
      this.render.call(this);
    },
    methods:{
      render(){
        let that = this;
        let settings = {
          format: this.format,
          height: this.height,
          width: this.width,
          text: this.text,
          fontOptions: this.fontOptions,
          font: this.font,
          textAlign: this.textAlign,
          textPosition: this.textPosition,
          textMargin: this.textMargin,
          fontSize: this.fontSize,
          background: this.background,
          lineColor: this.lineColor,
          margin: this.margin,
          marginTop: this.marginTop,
          marginBottom: this.marginBottom,
          marginLeft: this.marginLeft,
          marginRight: this.marginRight,
          valid: function (valid) {
            that.valid = valid;
          },
          displayValue: this.displayValue
        };

        this.removeUndefinedProps(settings);

        JsBarcode(this.$el.querySelector('.vue-barcode-element'), this.value, settings);
      },

      removeUndefinedProps(obj) {
        for (let prop in obj) {
          if (obj.hasOwnProperty(prop) && obj[prop] === undefined) {
          delete obj[prop];
          }
        }
      }
    }
  }
</script>

第三步：使用起来

引入组件然后注册，当然也可以在main.js中全局注册使用：

import JsBarcode from '@/components/JsBarcode'

  export default {
    components: {
      JsBarcode
    }
  }

项目中使用JsBarcode组件：

      <template #prreJsBarcode="iData">
        <js-barcode
          :value="iData.rowData.scope.row.prreNumber"
          :valid=true
        ></js-barcode>
      </template>

组件效果：