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';
使用组件
<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的更多相关文章
- vscode vue 模版生成,vue 一键生成
vscode vue 模版 继上篇文章(vue 格式化),顺便记录下 vue 模版生成.图片就不在贴了,如果有找不到 vscode 插件商店的可以访问上篇文章. 一.安装 VueHelper 在 vs ...
- Vue Google浏览器插件 Vue Devtools无法使用的解决办法
1.插件安装不必多说 一定要用Vue.js 开发版 Vue.min.js 在控制面板就不会显示 2.本地调试 用的是file://协议 修改插件允许访问文件网址 打上对勾
- Vue安装及插件Vue Devtools
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...
- 基于Vue cli生成的Vue项目的webpack4升级
前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...
- [vue]初探vue生态核心插件Vuex
为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...
- vue之自定义插件
1.插件的作用 插件通常会为 Vue 添加全局功能,一般是添加全局方法/全局指令/过滤器等 Vue 插件有一个公开方法 install ,通过 install 方法给 Vue 添加全局功能 通过全局方 ...
- webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...
- vue封装第三方插件并发布到npm
前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装 ...
- Vue 去脚手架插件,自动加载vue文件,style怎么办
书接上上会,因为当时也没想好怎么办,所以装聋作哑的忽略了Vue文件中的Style,Vue的做法我看着晕乎乎的,细想的话,无非就是自动填写到dom中,所担心的无非是命名冲突. 在一个项目中(像我这种自娱 ...
随机推荐
- Comet OJ 夏季欢乐赛 Gree的心房
Comet OJ 夏季欢乐赛 Gree的心房 题目传送门 题目描述 据说每一个走进Gree哥哥心房的小姑娘都没有能够再走出来-- 我们将Gree哥哥的心房抽象成一个n \times mn×m的地图,初 ...
- lower_case_table_names=1 启动报错 mysql8.0
我们知道在 Linux 环境下默认是区分大小写的,所以我们需要改变这种默认方式,经过网上各种搜索后,基本就是清一色的修改 lower_case_table_names,然后信誓旦旦的去修改了,但是修改 ...
- LOJ P10022 埃及分数 题解
每日一题 day62 打卡 Analysis 这道题一看感觉很像搜索,但是每次枚举x∈(1,10000000)作为分母显然太蠢了. 所以我们要想办法优化代码. 优化一:迭代加深 优化二: 我们确定了搜 ...
- 2-开发共享版APP(搭建指南)-修改包名
https://www.cnblogs.com/yangfengwu/p/11273734.html https://www.cnblogs.com/yangfengwu/p/11273746.htm ...
- html规范思维导图(仅限于自己)
- K8s中的网络
Kubernetes的网络通信问题: 1. 容器间通信: 即同一个Pod内多个容器间通信,通常使用loopback来实现. 2. Pod间通信: K8s要求,Pod和Pod之间通信必须使用Pod-IP ...
- 11-散列3 QQ帐户的申请与登陆 (25 分)
实现QQ新帐户申请和老帐户登陆的简化版功能.最大挑战是:据说现在的QQ号码已经有10位数了. 输入格式: 输入首先给出一个正整数N(≤10^5),随后给出N行指令.每行指令的格式为:“命令符(空 ...
- SpringBoot与MyBatis整合案例
1.导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- java 动态数组
package testjavapro; import java.util.*; public class testjava { public static void main(String args ...
- [HeadFrist-HTMLCSS学习笔记]第三章构建模块:Web页面建设
[HeadFrist-HTMLCSS学习笔记]第三章构建模块:Web页面建设 敲黑板!! <q>元素添加短引用,<blockquote>添加长引用 在段落里添加引用就使用< ...