vuejs如何生成条形码,下面编程教程网小编给大家简单介绍一下几种不同的方法!
安装脚手架
npm install jsbarcode --save
在需要的项目中引入
import JsBarcode from "jsbarcode"
使用方法
//输入内容
<el-input v-model="value" placeholder="请输入需要生成的内容" clearable></el-input>
//生成条形码
<img ref="qrCodeDiv"/>
JsBarcode(this.$refs.qrCodeDiv, this.value, {
format: "CODE128", //条形码的格式
width: 1, //线宽
height: 100, //条码高度
lineColor: "#000", //线条颜色
displayValue: true, //是否显示文字
margin: 2 //设置条形码周围的空白区域
});
注意:如果页面报”InvalidElementException: Not supported type to render on”错误,查看一下条形码输出是不是img格式!
以上是编程学习网小编为您介绍的“vuejs生成条形码(barcode)的方法”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:vuejs生成条形码(barcode)的方法
基础教程推荐
猜你喜欢
- css3由内往外水波纹动态效果 2024-12-13
- div层调整z-index属性无效原因分析及解决方法 2024-01-08
- 微信小程序吸底区域适配iPhoneX的实现 2023-12-08
- 在vuejs中引入滴滴移动端组件(Mand Mobile) 2024-12-08
- Jquery 学习笔记(二) 2024-01-16
- Ajax获取数据然后显示在页面的实现方法 2023-01-21
- Jquery Ajax请求文件下载操作失败的原因分析及解决办法 2022-10-17
- 推荐20家国外的脚本下载网站 2023-12-15
- 10分钟彻底搞懂微信小程序单页面应用路由 2023-12-28
- 使用CSS content的attr实现鼠标悬浮提示(tooltip)效果 2023-12-21
