alipay-emulator/uni_modules/lime-barcode/readme.md

lime-barcode 条形码组件

一个功能丰富的条形码生成组件，用于生成各种格式的条形码。支持多种条形码格式、自定义样式、颜色、大小等多种配置，可用于商品标识、库存管理、票据打印等多种场景。组件提供了丰富的自定义选项，可以满足各种条形码生成需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 条形码组件文档 - 站点1
• 条形码组件文档 - 站点2
• 条形码组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-barcode
2. 导入后可能需要重新编译项目
3. 在页面中使用l-barcode组件

::: tip 注意🔔 uniappx app 需要导入【lime-barcodegen】这个依赖插件，它是收费的插件，普通授权则需要自定义基座，才能使用，如果您是UI组件库VIP则忽略。 :::

代码演示

基础用法

最简单的条形码组件用法，只需要设置要编码的内容。

<l-barcode text="1234567890"></l-barcode>

指定条形码格式

设置条形码的格式类型。

<l-barcode text="1234567890" format="CODE128"></l-barcode>

自定义线条宽度和长度

设置条形码的线条宽度和长度。

<l-barcode 
  text="1234567890" 
  :line-width="2" 
  :line-length="50"
></l-barcode>

隐藏文本

设置是否显示条形码下方的文本。

<l-barcode 
  text="1234567890" 
  :display-value="false"
></l-barcode>

自定义文本

设置条形码下方显示的文本，可以与编码内容不同。

<l-barcode 
  text="1234567890" 
  display-value="自定义文本"
></l-barcode>

自定义文本样式

设置条形码文本的字体、大小、位置等。

<l-barcode 
  text="1234567890" 
  font="monospace" 
  :font-size="16" 
  text-align="center" 
  text-position="bottom"
></l-barcode>

自定义颜色

设置条形码的颜色和背景色。

<l-barcode 
  text="1234567890" 
  line-color="#1989fa" 
  background="#f5f5f5"
></l-barcode>

设置边距

设置条形码的外边距。

<l-barcode 
  text="1234567890" 
  :margin="10"
></l-barcode>

单独设置各个方向的边距

分别设置条形码的上、下、左、右边距。

<l-barcode 
  text="1234567890" 
  :margin-top="10" 
  :margin-bottom="20" 
  :margin-left="15" 
  :margin-right="15"
></l-barcode>

EAN-128格式

设置是否使用EAN-128格式。

<l-barcode 
  text="1234567890" 
  :ean128="true"
></l-barcode>

生成图片

• 1、通过调用插件的canvasToTempFilePath方法生成图片。

<image v-if="image" :src="image" style="width: 300rpx;" mode="widthFix"></image>
<l-barcode ref="barcodeRef" text="1234567890128"></l-barcode>
<button @click="onClick">生成图片</button>

// 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事件里接收图片地址

<image v-if="image" :src="image" style="width: 300rpx;" mode="widthFix"></image>
<l-barcode useCanvasToTempFilePath @success="success" text="1234567890128"></l-barcode>

const image = ref(null)
const success = (img) => {
	image.value = img
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-barcode/components/lime-barcode -->
<lime-barcode />

插件标签说明

标签名	说明
l-barcode	组件标签
lime-barcode	演示标签

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：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

支持与赞赏

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

支付宝赞助	微信赞助