vue条形码生成插件vue-barcode

更详细的请查阅官方文档

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在没有收到参数时不渲染节点，这样后台就不会报错

我在工作中用到的配置

 <barcodev-if="userlist.diseaseName":value="userlist.examineNumber":options="{ widht:100,height:50,background:'rgba(255,255,255,.0)'}">
</barcode>

options中使用JsBarcode的属性，需要注意的是条码除了黑色，其他的颜色都不能被识别，或快速识别

vue条形码生成插件vue-barcode相关推荐

JavaScript条形码生成插件 - 封装篇
很多事时候会用到手机扫描条形码收录或者查验信息的功能,那么,条形码是如何实现的呢? 今天,通过封装的js插件,完成这个问题. JavaScript条形码生成插件 - 封装篇 j q 2 2 .c o ...
Vue Google浏览器插件 Vue Devtools无法使用的解决办法
1.插件安装不必多说一定要用Vue.js 开发版 Vue.min.js 在控制面板就不会显示 2.本地调试用的是file://协议修改插件允许访问文件网址打上对勾转载于:https ...
Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...
pHp封装成vue,vue.js生成条形码的方法
本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家. 1.下载插件npm install @xkeshi/vue-barcode //下载条形码插件 2.在m ...
vue中生成条形码，以及条形码的所有参数
//安装条形码插件 npm install @xkeshi/vue-barcode 在main.js中引入 import VueBarcode from '@xkeshi/vue-barcode'; ...
vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
Vue使用QRCode插件，生成二维码
Vue使用qrcode插件,生成二维码简单的生成二维码: 1.使用vue脚手架工具生成一个vue项目(这不做具体解释,可自己去观看有关视频或者文档) 2.创建一个vue模块QRCode.vue 3. ...
前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件
快速实现基于uQRCode封装简单快速实用全端二维码生成插件; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12677 效果图 ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...

vue条形码生成插件vue-barcode

vue条形码生成插件vue-barcode相关推荐

最新文章

热门文章