148 lines
4.6 KiB
Markdown
148 lines
4.6 KiB
Markdown
# 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")
|
||
|
||
## 打赏
|
||
|
||
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
|
||
|
||
 |