VUE中的数据转条码插件

VUE中的数据转条码插件

1.npm命令行下载
npm install jsbarcode –save

2.使用

// 引入 jsbarcode
const JsBarcode = require('jsbarcode');
// 使用 可以在VUE中注册全局的插件也可以，不过我推荐单页面引入直接使用因为条码不是很多页面都有。

3.使用时注意事项
使用JsBarcode时我们要绑定需要转换成条码dom节点再在对应的元素节点上添加ID属性来进行绑定，这时问题就来了！使用时机问题如果在vue的生命周期的Created()方法中时使用，但所有元素并未挂载所以会报错！我们需要在mounted()中使用用当节点全部挂载完毕时
如：

mounted() { 
JsBarcode("#barcode", "Hi world!");
}

我们页面会使用v-if来控制组件的显示隐藏，如果我们需要渲染的二维码在v-if中（注：因为v-if在页面刚挂载时节点并不存在所以使用时机不能在生命周期中），指令放在钩子函数中mounted()中也会报错，我们需要在控制显示组件的显示按钮中调用JsBarcode的指令去转换二维码。
最后注意！我们需要异步处理JsBarcode指令 因为数据请求前调用这个是不生效的必须数据先存在再调用你需要自己想办法处理异步 推荐ES6F封装的Promise对象的使用方法，我这里做拉一个递归函数的性质来解决问题。
4.简单例子
！我们主要在VUE中主要用到第3种例子方便遍历元素的条码
（（1）你好，世界

　HTML：<svg id="barcode"></svg>
    JS：JsBarcode("#barcode", "Hi world!");

结果：
　

（2）示例与选项

HTML：<svg id="barcode"></svg>
　JS： JsBarcode("#barcode", "1234", {
　　　　　format: "pharmacode",
　　 　　   lineColor: "#0aa",
　　 　　   width: 4,
　　 　　   height: 40,
　　　　   displayValue: false
　　　});

结果：
　　
　　　　

（3）在HTML元素中定义值和选项：

　　HTML：<svg class="barcode"
                            jsbarcode-format="CODE128"
                           :jsbarcode-value= obj.id
                            jsbarcode-textmargin="0"
                            jsbarcode-fontoptions="bold">
                      </svg>
      JS：JsBarcode(".barcode").init();

   结果：

（4）更高级的用例：

HTML：<svg id="barcode"></svg>
　JS： JsBarcode("#barcode")
  　　　　.options({font: "OCR-B"})      // 会影响所有条形码
 　　　　 .EAN13("1234567890128", {fontSize: 18, textMargin: 0})
 　　　　 .blank(20)        // 在条形码之间创建空间 
  　　　　.EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})
  　　　　.render();

结果：

支持的条形码：
• CODE128
o CODE128（自动模式切换）
o CODE128 A / B / C（强制模式）
• EAN
o EAN-13
o EAN-8
o EAN-5
o EAN-2
o UPC（A）
o UPC（E）
• CODE39
• ITF-14
• MSI
o MSI10
o MSI11
o MSI1010
o MSI1110

在这里插入代码片