vue条形码生成插件vue-barcode
Posted shcs
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue条形码生成插件vue-barcode相关的知识,希望对你有一定的参考价值。
更详细的请查阅官方文档
https://github.com/lindell/vue-barcode
vue-barcode是JsBarcode的一个简单包装。所以在使用时的配置属性需要在JsBarcode中查看
JsBarcode官方文档
https://github.com/lindell/JsBarcode
安装
npm install vue-barcode -S
引入注册组件
import VueBarcode from ‘vue-barcode‘;
Vue.component(‘barcode‘, VueBarcode);
使用组件
<barcode :value="barcodeValue"> 条形码显示失败时的内容 </barcode>
注意点:value值需要给一个初始值,或者使用v-if在没有收到参数时不渲染节点,这样后台就不会报错
我在工作中用到的配置
<barcode v-if="userlist.diseaseName" :value="userlist.examineNumber" :options="{ widht:100,height:50, background:‘rgba(255,255,255,.0)‘}"></barcode>
options中使用JsBarcode的属性,需要注意的是条码除了黑色,其他的颜色都不能被识别,或快速识别
不驰于空想,不鹜于虚声
以上是关于vue条形码生成插件vue-barcode的主要内容,如果未能解决你的问题,请参考以下文章
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码