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


基础教程推荐
猜你喜欢
- 用js读写cookie的简单方法(推荐) 2024-01-05
- ElementUI时间控件el-date-picker选择时间范围固定(不 2024-12-07
- 纯CSS如何禁止用户复制网页的内容 2024-02-08
- Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码 2023-12-21
- vuejs教程 笔记(一) 2023-10-08
- Vue3怎么运用pinia状态管理工具 2025-01-13
- React Native中NavigatorIOS组件的简单使用详解 2023-12-20
- vue接口封装中的环境的切换 2025-01-12
- JavaScript实现H5接金币功能(实例代码) 2023-11-30
- 使用snowfall.jquery.js实现爱心满屏飞的效果 2024-02-08