主题
LimeBarcode 条形码组件
一个功能丰富的条形码生成组件,用于生成各种格式的条形码。支持多种条形码格式、自定义样式、颜色、大小等多种配置,可用于商品标识、库存管理、票据打印等多种场景。组件提供了丰富的自定义选项,可以满足各种条形码生成需求。
插件依赖:
lime-shared
、lime-style
文档链接
📚 组件详细文档请访问以下站点:
安装方法
注意🔔
uniappx app 需要导入【lime-barcodegen】这个依赖插件,它是收费的插件,普通授权则需要自定义基座,才能使用,如果您是UI组件库VIP则忽略。
代码演示
基础用法
最简单的条形码组件用法,只需要设置要编码的内容。
html
<l-barcode text="1234567890"></l-barcode>
1
指定条形码格式
设置条形码的格式类型。
html
<l-barcode text="1234567890" format="CODE128"></l-barcode>
1
自定义线条宽度和长度
设置条形码的线条宽度和长度。
html
<l-barcode
text="1234567890"
:line-width="2"
:line-length="50"
></l-barcode>
1
2
3
4
5
2
3
4
5
隐藏文本
设置是否显示条形码下方的文本。
html
<l-barcode
text="1234567890"
:display-value="false"
></l-barcode>
1
2
3
4
2
3
4
自定义文本
设置条形码下方显示的文本,可以与编码内容不同。
html
<l-barcode
text="1234567890"
display-value="自定义文本"
></l-barcode>
1
2
3
4
2
3
4
自定义文本样式
设置条形码文本的字体、大小、位置等。
html
<l-barcode
text="1234567890"
font="monospace"
:font-size="16"
text-align="center"
text-position="bottom"
></l-barcode>
1
2
3
4
5
6
7
2
3
4
5
6
7
自定义颜色
设置条形码的颜色和背景色。
html
<l-barcode
text="1234567890"
line-color="#1989fa"
background="#f5f5f5"
></l-barcode>
1
2
3
4
5
2
3
4
5
设置边距
设置条形码的外边距。
html
<l-barcode
text="1234567890"
:margin="10"
></l-barcode>
1
2
3
4
2
3
4
单独设置各个方向的边距
分别设置条形码的上、下、左、右边距。
html
<l-barcode
text="1234567890"
:margin-top="10"
:margin-bottom="20"
:margin-left="15"
:margin-right="15"
></l-barcode>
1
2
3
4
5
6
7
2
3
4
5
6
7
EAN-128格式
设置是否使用EAN-128格式。
html
<l-barcode
text="1234567890"
:ean128="true"
></l-barcode>
1
2
3
4
2
3
4
生成图片
- 1、通过调用插件的
canvasToTempFilePath
方法生成图片。
html
<image v-if="image" :src="image" style="width: 300rpx;" mode="widthFix"></image>
<l-barcode ref="barcodeRef" text="1234567890128"></l-barcode>
<button @click="onClick">生成图片</button>
1
2
3
2
3
js
// vue3
const barcodeRef = ref(null)
const onClick = () => {
if(!barcodeRef.value) return
barcodeRef.value.canvasToTempFilePath({
success(res) {
image.value = res.tempFilePath
console.log('success:::', res)
},
fail(err) {
console.log('err:::', err)
}
})
}
// vue2
const el = this.$refs['barcodeRef']
el.canvasToTempFilePath({
success:(res)=>{
this.image = res.tempFilePath
},
fail(err) {
console.log('err:::', err)
}
})
// uvue
const el:LBarcodeComponentPublicInstance = this.$refs['barcodeRef'] as LBarcodeComponentPublicInstance
el.canvasToTempFilePath({
success:(res: UTSJSONObject)=>{
this.image = res['tempFilePath']
},
fail(err: UTSJSONObject) {
console.log('err:::', err)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
- 2、通过设置
useCanvasToTempFilePath
在success
事件里接收图片地址
html
<image v-if="image" :src="image" style="width: 300rpx;" mode="widthFix"></image>
<l-barcode useCanvasToTempFilePath @success="success" text="1234567890128"></l-barcode>
1
2
2
js
const image = ref(null)
const success = (img) => {
image.value = img
}
1
2
3
4
2
3
4
快速预览
导入插件后,可以直接使用以下标签查看演示效果:
html
<!-- 代码位于 uni_modules/lime-barcode/components/lime-barcode -->
<lime-barcode />
1
2
2
插件标签说明
标签名 | 说明 |
---|---|
l-barcode | 组件标签 |
lime-barcode | 演示标签 |
Vue2使用说明
main.js中添加以下代码:
js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
1
2
3
4
2
3
4
详细配置请参考官方文档:Vue Composition API
API文档
Props 属性说明
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
text | 条形码内容 | string | number | - |
format | 条形码格式,支持CODE128、EAN13、UPC、CODE39等 | string | - |
lineWidth | 条形码线条宽度 | string | number | - |
lineLength | 条形码线条长度 | string | number | - |
displayValue | 是否显示条形码下方文本,或自定义显示文本 | string | boolean | true |
fontOptions | 文本字体选项 | string | - |
font | 文本字体 | string | - |
textAlign | 文本对齐方式 | string | - |
textPosition | 文本位置 | string | - |
textMargin | 文本与条形码之间的距离 | string | number | - |
fontSize | 文本字体大小 | string | number | - |
background | 条形码背景色 | string | - |
lineColor | 条形码线条颜色 | string | - |
margin | 条形码外边距 | string | number | - |
marginTop | 条形码上边距 | string | number | - |
marginBottom | 条形码下边距 | string | number | - |
marginLeft | 条形码左边距 | string | number | - |
marginRight | 条形码右边距 | string | number | - |
flat | 是否使用扁平化样式 | boolean | - |
ean128 | 是否使用EAN-128格式 | string | boolean | - |
lStyle | 自定义样式 | string | - |
useCanvasToTempFilePath | 是否使用Canvas导出为临时文件 | boolean | - |
Events 事件
事件名 | 说明 | 回调参数 |
---|---|---|
success | 条形码生成完成时触发 | path: string 临时文件路径(仅当 useCanvasToTempFilePath 为 true 时有效) |
支持的条形码格式
组件基于jsbarcode库,支持以下条形码格式,其中部分格式在uniappx app中受限:
条形码格式 | 普通环境 | uniappx app |
---|---|---|
CODE128(自动) | ✓ | ✓ |
CODE128A | ✓ | ✓ |
CODE128B | ✓ | ✓ |
CODE128C | ✓ | ✓ |
EAN13 | ✓ | ✓ |
EAN8 | ✓ | ✗ |
EAN5 | ✓ | ✗ |
EAN2 | ✓ | ✗ |
UPC | ✓ | ✗ |
UPCE | ✓ | ✗ |
CODE39 | ✓ | ✓ |
ITF | ✓ | ✗ |
ITF14 | ✓ | ✗ |
MSI | ✓ | ✗ |
MSI10 | ✓ | ✗ |
MSI11 | ✓ | ✗ |
MSI1010 | ✓ | ✗ |
MSI1110 | ✓ | ✗ |
pharmacode | ✓ | ✗ |
codabar | ✓ | ✓ |
GenericBarcode | ✓ | ✗ |
注意:uniappx app 条形码类型目前仅支持 EAN13、CODE39、CODE128、codabar。
常见问题
- 微信APP扫码支持的条码类型有 code128\code39\ean13\ean8\upc\itf14
支持与赞赏
如果你觉得本插件解决了你的问题,可以考虑支持作者:
支付宝赞助 | 微信赞助 |
---|---|
![]() | ![]() |