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)的方法
基础教程推荐
猜你喜欢
- CSS的expression使用简介 2022-10-16
- Vue实现富文本功能 2023-10-08
- js判断一个对象是否在一个对象数组中(场景分析) 2022-10-21
- vertical-align 表单元素垂直对齐的解决方法 2024-01-24
- el-form-item把label改成自定义 2025-01-17
- VUE——使用easy-typer-js实现打字机效果 2023-10-08
- vue开发如何显示当天是星期几 2025-01-17
- Lunar组件获取指定月份的所有老黄历每日宜忌 2025-01-15
- jQuery Ajax 实例详解 ($.ajax、$.post、$.get) 2022-10-17
- 百度echarts:3d柱状图根据数据多少显示不同颜色 2024-12-09