基于VUE的条形码插件JsBarcode

一款基于VUE的条形码插件JsBarcode，页面给出了3种不同的条码风格：显示预设文本内容的条码、指定颜色的条码和显示指定长度数字的条码，条码的参数均可以自由设置。

分类：其它特效 > 二维码难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入页面的样式文件、vue.min.js和条码插件JsBarcode.all.min.js，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">
<script src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript" src='js/JsBarcode.all.min.js'></script>

页面的body部分，需设置好3种条码的容器和参数等内容，代码如下：

<div class="heading">
  <h1>Js Barcode</h1>
  <h4>基于VUE的条形码插件</h4>
</div>

<div class="container" id="app">
  <div class="form-group">
  	<svg id="barcode1"></svg>
  </div>
  <script type="text/javascript">
	  JsBarcode("#barcode1", "Coding is so funny!");
  </script>
</div>
<br/><br/>
<div class="container" id="app">
  <div class="form-group">
   <svg id="barcode"></svg>
  </div>
  <script type="text/javascript">
	  JsBarcode("#barcode", "7788", {
	  format: "pharmacode",
	  lineColor: "#0aa",
	  width: 8,
	  height: 40,
	  displayValue: false
	});
  </script>
</div>
<br/><br/>
<div class="container" id="app">
  <div class="form-group">
   <svg class="barcode3"
	  jsbarcode-format="upc"
	  jsbarcode-value="77881314520"
	  jsbarcode-textmargin="0"
	  jsbarcode-fontoptions="bold">
	</svg>
  </div>
  <script type="text/javascript">
    JsBarcode(".barcode3").init();
  </script>
</div>