vue 条形码

 1、命令：

npm install jsbarcode --save 

 

2、引入：

<script src="https://www.jq22.com/jquery/vue.min.js"></script>

<script src='js/JsBarcode.all.min.js'></script>）

（安装了依赖可不引入）

 

3、声明：

var JsBarcode = require('jsbarcode')

 

4、简单例子：

（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();

　　 结果：

         

摘自 https://www.cnblogs.com/54sister/p/9554820.html