# 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

## 支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

| 支付宝赞助 | 微信赞助 |
|------------|------------|
| ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png) | ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png) |