正文

vue条形码生成插件vue-barcode

IP云
IP云V管理员/3 阅读
09/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

更详细的请查阅官方文档

https://github.com/lindell/vue-barcode

vue-barcode是JsBarcode的一个简单包装。所以在使用时的配置属性需要在JsBarcode中查看

JsBarcode官方文档

https://github.com/lindell/JsBarcode

安装

npm install @xkeshi/vue-barcode vue

引入注册组件

import VueBarcode from '@xkeshi/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的属性，需要注意的是条码除了黑色，其他的颜色都不能被识别，或快速识别不驰于空想，不鹜于虚声