# lime-barcode
- uniapp vue3 生成条形码插件，插件核心源于[JsBarcode](https://github.com/lindell/JsBarcode)
- uniappx app 需要导入[lime-barcodegen](https://ext.dcloud.net.cn/plugin?id=16403)

## 文档
  [barcode【站点1】](https://limex.qcoon.cn/components/barcode.html)
  [barcode【站点2】](https://limeui.netlify.app/components/barcode.html)
  [barcode【站点3】](https://limeui.familyzone.top/components/barcode.html)



## 安装
在插件市场导入即可

**注意**
- uniappx app 需要导入[lime-barcodegen](https://ext.dcloud.net.cn/plugin?id=16403)
- uniappx app 条形码类型，目前仅支持 EAN13、CODE39、CODE128、codabar

## 代码演示
### 基础使用

```html
<l-barcode text="1234567890128" lineWidth="4rpx" lineLength="30px" lineColor="blue" format="ean13" margin="5px"></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
}
```

### Vue2使用
- 插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可

```js
// main.js vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```


### 查看示例
- 导入后直接使用这个标签查看演示效果

```html
// 代码位于 uni_modules/lime-barcode/compoents/lime-barcode
<lime-barcode />
```

### 插件标签
- 默认 l-barcode 为 component
- 默认 lime-barcode 为 demo



## API

### Props

| 参数                       |  类型             | 默认值       | 说明                                                         |
| --------------------------| ------------------------------------------------------------ | ---------------- | ------------ |
|format|String|code128| 要使用的条形码类型。</br>提示：微信APP扫码支持的条码类型有 code128\code39\ean13\ean8\upc\itf14|
|width|`Number|String`|2| 设置条之间的宽度|
|height|`Number|String`|60| 设置条的高度|
|displayValue|Boolean|true| 是否在条形码下方显示文字|
|text|String|1234567890128| 条码内容|
|textAlign|String|center |可选值:left\right,设置文本的水平对齐方式|
|textPosition|String|bottom |可选值top,设置文本的垂直位置|
|textMargin|`Number|String`|5 |设置文本的垂直位置|
|fontSize|`Number|String`|24| 设置文本的大小|
|fontColor|String(color)|#000000| 设置文本的颜色|
|lineColor|String(color)|#000000| 设置条形码的颜色|
|background|String(color)|#FFFFFF| 设置条形码的背景色|
|margin|`Number|String`|0| 设置条形码周围的空白边距|
|marginTop|`Number|String`| | 设置条形码周围的上边距|
|marginBottom|`Number|String`| | 设置条形码周围的下边距|
|marginLeft|`Number|String`| | 设置条形码周围的左边距|
|marginRight|`Number|String`| | 设置条形码周围的右边距|

### 常见问题
- 微信APP扫码支持的条码类型有 code128\code39\ean13\ean8\upc\itf14

### 感谢

[jsBarcode](https://521github.com/lindell/JsBarcode "jsBarcode")

## 打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。  
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)