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)的方法


猜你喜欢
- JavaScript实现动态删除列表框值的方法 2023-11-30
- 致命错误:在第29313行的/home/xxxx/public_html/xx/xx/includes/src/__default.php中找不到“Magento_Db_Adapter_Pdo_Mys 2023-10-26
- JS统计Flash被网友点击过的代码 2023-11-30
- vuejs如何console.log打印div中的内容并去除标签 2025-01-14
- 移动端点击态处理的三种实现方式 2024-02-21
- HTML5 video视频播放标签如何添加封面图片 2023-07-08
- JS获取各种浏览器窗口大小的方法 2023-12-01
- javascript实现获取浏览器版本、操作系统类型 2023-12-02
- openlayers6之地图覆盖物overlay详解 2024-02-25
- 详解CSS布局中浮动问题的四种解决方案 2024-01-06