一款基于VUE的条形码插件JsBarcode,页面给出了3种不同的条码风格:显示预设文本内容的条码、指定颜色的条码和显示指定长度数字的条码,条码的参数均可以自由设置。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791