更详细的请查阅官方文档

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. 修改opencart extension插件代码后无法重新安装的解决办法

    有时我们在为opencart安装一些插件后,发现有些地方需要细微的调整,然后去修改插件代码重新安装,但是却没有成功.开始有点怀疑是不是不能修改代码,但也不至于啊,不然开发者怎么制作插件.应该是哪里出了 ...

  2. application platform as a service (aPaaS)

    Application platform as a service (aPaaS) is a cloud service that provides environments for the deve ...

  3. JZOJ3492数数&&GDOI2018超级异或绵羊——位&&类欧几里得

    JZOJ3492 数数(count) 我们知道,一个等差数列可以用三个数A,B,N表示成如下形式:  B+A,B+2A,B+3A⋯B+NA ztxz16想知道对于一个给定的等差数列,把其中每一项用二进 ...

  4. cube.js 最近的一些更新

    cube.js 是一个和不错的数据分析框架,最近又有了一些新的功能支持,以下是一些简单的 总结 基于web socket 的预览支持 react hooks api 支持 支持基于reecharts ...

  5. pytest--运行指定的测试和参数化

    mark pytest提供了标记机制,允许你使用marker对测试函数做标记,一个测试函数可以有多个marker,一个marker也可以用来标记多个测试函数 比如我们需要进行冒烟测试,不可能把所有的用 ...

  6. 【JZOJ100209】【20190705】狂妄之人

    题目 \(S\)串长为\(n\),字符集大小为\(k\) 一次操作为:取走\(S\)的任意一个字符或将\(S\)重排为一个没有出现过的字符\(S'\) 询问有多少个\(S\)使得后手必胜,答案对\(P ...

  7. uiView获取指定子view

    判断对象类型 -(BOOL) isKindOfClass: classObj判断是否是这个类或者这个类的子类的实例 -(BOOL) isMemberOfClass: classObj 判断是否是这个类 ...

  8. Spring Cloud 升级最新 Greenwich 版本,舒服了~

    去年将 Spring Cloud 升级到了 Finchley 版本: Spring Cloud 升级最新 Finchley 版本,踩了所有的坑! 这个大版本栈长是踩了非常多的坑啊,帮助了不少小伙伴. ...

  9. Spring Security教程之退出登录logout(十)

    要实现退出登录的功能我们需要在http元素下定义logout元素,这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain.当我们指定 ...

  10. List中的ArrayList和LinkedList源码分析

    ​ List是在面试中经常会问的一点,在我们面试中知道的仅仅是List是单列集合Collection下的一个实现类, List的实现接口又有几个,一个是ArrayList,还有一个是LinkedLis ...