更详细的请查阅官方文档

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的属性,需要注意的是条码除了黑色,其他的颜色都不能被识别,或快速识别

不驰于空想,不鹜于虚声

vue条形码生成插件vue-barcode的更多相关文章

  1. vscode vue 模版生成,vue 一键生成

    vscode vue 模版 继上篇文章(vue 格式化),顺便记录下 vue 模版生成.图片就不在贴了,如果有找不到 vscode 插件商店的可以访问上篇文章. 一.安装 VueHelper 在 vs ...

  2. Vue Google浏览器插件 Vue Devtools无法使用的解决办法

    1.插件安装不必多说  一定要用Vue.js 开发版    Vue.min.js 在控制面板就不会显示 2.本地调试 用的是file://协议 修改插件允许访问文件网址  打上对勾

  3. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  4. 基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...

  5. [vue]初探vue生态核心插件Vuex

    为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...

  6. vue之自定义插件

    1.插件的作用 插件通常会为 Vue 添加全局功能,一般是添加全局方法/全局指令/过滤器等 Vue 插件有一个公开方法 install ,通过 install 方法给 Vue 添加全局功能 通过全局方 ...

  7. webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...

  8. vue封装第三方插件并发布到npm

    前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装 ...

  9. Vue 去脚手架插件,自动加载vue文件,style怎么办

    书接上上会,因为当时也没想好怎么办,所以装聋作哑的忽略了Vue文件中的Style,Vue的做法我看着晕乎乎的,细想的话,无非就是自动填写到dom中,所担心的无非是命名冲突. 在一个项目中(像我这种自娱 ...

随机推荐

  1. Python基础之输出格式和If判断

    格式化输出的三种方式 一.占位符 #占位符 name = 'nick' age = 19 print('my name is %s my age is %s' % (name, age)) age = ...

  2. BEST FREE UNITY ASSETS – OVER 200 CURATED QUALITY ASSETS

    http://www.procedural-worlds.com/blog/best-free-unity-assets-categorised-mega-list/ BEST FREE UNITY ...

  3. mybatis框架,使用foreach实现复杂结果的查询--循环List集合方式

    需求,根据用户角色列表  查询用户列表信息 之前我们传入的参数是Array,一个数组的形式,现在我们传入的是一个List集合,其他条件没有变化. /** * 需求:传入指定的用户角色,用户角色有1-n ...

  4. 【java】ORA-12505, TNS:listener does not currently know of SID given in connect descriptor

    如果是负载均衡,则 jdbc.url=jdbc:oracle:thin:@(description=(address_list= (address=(host=XX.XXX.X.XX) (protoc ...

  5. MySQL 五大引擎之间的区别和优劣之分

    MySQL五大引擎介绍: MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另外两种类型INNODB和BERKLEY(BDB)  ISAM:ISAM是一个定义明确且历经时间考验的数据表格管理方 ...

  6. 洛谷p3916图的遍历题解

    题面 思路: 反向建边,dfs艹咋想出来的啊 倒着遍历,如果你现在遍历到的这个点已经被标记了祖先是谁了 那么就continue掉 因为如果被标记了就说明前面已经遍历过了 而我们的顺序倒着来的 前边的一 ...

  7. 蒟蒻所见之DP

    本文有错是正常的,因为这只是一部成长史,并非教学博文. 会常年更下去. 2019.10.24 DP,核心只是"表格法"而已. DP题真正所考察的,是: 1.对问题的描述.简化以及归 ...

  8. mysql(七)查询基本语法

    连接 外连接 如表-------------------------------------------------table1 | table2 |------------------------- ...

  9. windows下Apache2.4配置php的解析运行

    1.安装php7 2.安装apache2.4 3.找到apache2.4的httpd.conf文件,配置好apache,然后通过httpd.exe -k install -n "servic ...

  10. unity延迟加载图片

    把加载图片所需要的信息封装成一个任务(自己写的类,包括路径,回调等信息),再将该任务添加到自己写的任务池中(在update中执行任务委托),由于只是添加任务操作,加载完成后自动调用回调函数实例化,对主 ...