更新记录

2.0.1（2026-10-22）

• fix: type.ts 补充 ariaLabel/ariaRole prop，修复 uni-app x 端模板裸引用未声明 prop 导致的 H5 警告（Property "ariaLabel" was accessed during render but is not defined on instance）

0.0.9（2025-12-09）

• fix: 修复类型问题

0.0.8（2025-09-28）

• fix: uniapp vue2类型问题

平台兼容性

uni-app(4.73)

uni-app x(4.73)

name: lime-barcode 条形码组件 description: 功能丰富、高度可定制的条形码生成组件，支持多种条形码格式、自定义样式、颜色、大小等，适用于商品标识、库存管理等场景。 tags:

• barcode
• 条形码
• 条码
• 商品 componentTag: l-barcode plugin: lime-barcode category: 业务组件 dependencies:

• lime-shared

lime-barcode 条形码组件

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

插件依赖：lime-shared

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

安装方法

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

代码演示

基础用法

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

<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"
  :show-text="false"
></l-barcode>

自定义文本

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

<l-barcode text="1234567890"></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>

设置渲染模式

设置条形码的渲染模式，支持 canvas 和 svg。

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

设置条码方向

设置条形码的方向，支持水平和垂直。

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

EAN-128格式

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

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

生成图片

通过设置 toImage 在 success 事件里接收图片地址。

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

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

API 文档

Props 分类

🎯 基础配置（最常用）

🎨 样式与外观

⚙️ 行为与交互

🔧 高级配置

Events

Slots

无插槽

支持的条形码格式

组件基于 jsbarcode 库，支持以下条形码格式：

主题定制

本组件主要通过 props 进行样式定制，没有提供额外的 CSS 变量。

使用示例

方式一：通过 props 直接设置（推荐）

<l-barcode
  text="1234567890"
  line-color="#1989fa"
  background="#f5f5f5"
  :line-width="2"
  :line-length="50"
></l-barcode>

方式二：通过 lStyle 属性直接设置

<l-barcode
  text="1234567890"
  :l-style="{ width: '300px' }"
></l-barcode>

⚠️ 重要提示

关于 class 的使用

请不要直接在 lime- 组件上使用 class 属性！ 这会导致样式失效或产生意外行为。推荐使用以下三种方式：

方式一：在父级或根节点上设置 class

<view class="barcode-wrapper">
  <l-barcode text="1234567890"></l-barcode>
</view>
<style>
.barcode-wrapper {
  /* 在这里设置相关样式 */
}
</style>

方式二：使用 lStyle 直接设置

<l-barcode
  text="1234567890"
  :l-style="{ width: '300px' }"
></l-barcode>

方式三：使用 lClass 配合样式

<l-barcode text="1234567890" lClass="custom-barcode"></l-barcode>
<style>
.custom-barcode {
  /* 在这里设置相关样式 */
}
</style>

Vue2 使用说明

插件使用了 composition-api，如需在 Vue2 项目中使用，请按照官方教程配置。

关键配置代码（在 main.js 中添加）：

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

快速预览

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

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

插件标签说明

文档链接

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

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

注意事项

• 微信APP扫码支持的条码类型有 code128、code39、ean13、ean8、upc、itf14

支持与赞赏

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

支付宝赞助	微信赞助