288 lines
7.5 KiB
Markdown
288 lines
7.5 KiB
Markdown
# lime-barcode 条形码组件
|
||
一个功能丰富的条形码生成组件，用于生成各种格式的条形码。支持多种条形码格式、自定义样式、颜色、大小等多种配置，可用于商品标识、库存管理、票据打印等多种场景。组件提供了丰富的自定义选项，可以满足各种条形码生成需求。
|
||
|
||
> 插件依赖：`lime-shared`、`lime-style`
|
||
|
||
## 文档链接
|
||
📚 组件详细文档请访问以下站点：
|
||
- [条形码组件文档 - 站点1](https://limex.qcoon.cn/components/barcode.html)
|
||
- [条形码组件文档 - 站点2](https://limeui.netlify.app/components/barcode.html)
|
||
- [条形码组件文档 - 站点3](https://limeui.familyzone.top/components/barcode.html)
|
||
|
||
## 安装方法
|
||
1. 在uni-app插件市场中搜索并导入`lime-barcode`
|
||
2. 导入后可能需要重新编译项目
|
||
3. 在页面中使用`l-barcode`组件
|
||
|
||
::: tip 注意🔔
|
||
uniappx app 需要导入[【lime-barcodegen】](https://ext.dcloud.net.cn/plugin?id=16403)这个依赖插件，它是收费的插件，普通授权则需要自定义基座，才能使用，如果您是UI组件库VIP则忽略。
|
||
:::
|
||
|
||
|
||
## 代码演示
|
||
|
||
### 基础用法
|
||
最简单的条形码组件用法，只需要设置要编码的内容。
|
||
|
||
```html
|
||
<l-barcode text="1234567890"></l-barcode>
|
||
```
|
||
|
||
### 指定条形码格式
|
||
设置条形码的格式类型。
|
||
|
||
```html
|
||
<l-barcode text="1234567890" format="CODE128"></l-barcode>
|
||
```
|
||
|
||
### 自定义线条宽度和长度
|
||
设置条形码的线条宽度和长度。
|
||
|
||
```html
|
||
<l-barcode
|
||
text="1234567890"
|
||
:line-width="2"
|
||
:line-length="50"
|
||
></l-barcode>
|
||
```
|
||
|
||
### 隐藏文本
|
||
设置是否显示条形码下方的文本。
|
||
|
||
```html
|
||
<l-barcode
|
||
text="1234567890"
|
||
:display-value="false"
|
||
></l-barcode>
|
||
```
|
||
|
||
### 自定义文本
|
||
设置条形码下方显示的文本，可以与编码内容不同。
|
||
|
||
```html
|
||
<l-barcode
|
||
text="1234567890"
|
||
display-value="自定义文本"
|
||
></l-barcode>
|
||
```
|
||
|
||
### 自定义文本样式
|
||
设置条形码文本的字体、大小、位置等。
|
||
|
||
```html
|
||
<l-barcode
|
||
text="1234567890"
|
||
font="monospace"
|
||
:font-size="16"
|
||
text-align="center"
|
||
text-position="bottom"
|
||
></l-barcode>
|
||
```
|
||
|
||
### 自定义颜色
|
||
设置条形码的颜色和背景色。
|
||
|
||
```html
|
||
<l-barcode
|
||
text="1234567890"
|
||
line-color="#1989fa"
|
||
background="#f5f5f5"
|
||
></l-barcode>
|
||
```
|
||
|
||
### 设置边距
|
||
设置条形码的外边距。
|
||
|
||
```html
|
||
<l-barcode
|
||
text="1234567890"
|
||
:margin="10"
|
||
></l-barcode>
|
||
```
|
||
|
||
### 单独设置各个方向的边距
|
||
分别设置条形码的上、下、左、右边距。
|
||
|
||
```html
|
||
<l-barcode
|
||
text="1234567890"
|
||
:margin-top="10"
|
||
:margin-bottom="20"
|
||
:margin-left="15"
|
||
:margin-right="15"
|
||
></l-barcode>
|
||
```
|
||
|
||
|
||
### EAN-128格式
|
||
设置是否使用EAN-128格式。
|
||
|
||
```html
|
||
<l-barcode
|
||
text="1234567890"
|
||
:ean128="true"
|
||
></l-barcode>
|
||
```
|
||
|
||
### 生成图片
|
||
- 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>
|
||
```
|
||
```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)
|
||
}
|
||
})
|
||
```
|
||
|
||
- 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>
|
||
```
|
||
```js
|
||
const image = ref(null)
|
||
const success = (img) => {
|
||
image.value = img
|
||
}
|
||
```
|
||
|
||
## 快速预览
|
||
导入插件后，可以直接使用以下标签查看演示效果：
|
||
|
||
```html
|
||
<!-- 代码位于 uni_modules/lime-barcode/components/lime-barcode -->
|
||
<lime-barcode />
|
||
```
|
||
|
||
## 插件标签说明
|
||
|
||
| 标签名 | 说明 |
|
||
| --- | --- |
|
||
| `l-barcode` | 组件标签 |
|
||
| `lime-barcode` | 演示标签 |
|
||
|
||
## Vue2使用说明
|
||
main.js中添加以下代码：
|
||
```js
|
||
// vue2项目中使用
|
||
import Vue from 'vue'
|
||
import VueCompositionAPI from '@vue/composition-api'
|
||
Vue.use(VueCompositionAPI)
|
||
```
|
||
|
||
详细配置请参考官方文档：[Vue Composition API](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)
|
||
|
||
|
||
## 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
|
||
|
||
## 支持与赞赏
|
||
|
||
如果你觉得本插件解决了你的问题，可以考虑支持作者：
|
||
|
||
| 支付宝赞助 | 微信赞助 |
|
||
|------------|------------|
|
||
|  |  | |