更新记录

0.0.5（2025-08-20）

• fix: 修复多个组件的情况只最后一次生效

0.0.4（2025-05-24）

• feat: 兼容uniapp x 鸿蒙next

0.0.3（2025-01-17）

• feat: 兼容hbx4.45

平台兼容性

uni-app x(4.72)

lime-barcodegen 条形码生成组件

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

插件依赖：配合 lime-barcode uvue 组件使用

文档链接

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

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

安装方法

1. 在uni-app插件市场中搜索并导入lime-barcodegen
2. 导入后需要自定义基座才能运行
3. 在页面中使用相关API生成条形码

代码演示

基础用法

最简单的条形码生成用法，只需要设置文本和基本配置即可。

<view ref="barcodeRef"></view>

import { renderer, type LBarcodeGenOptions } from '@/uni_modules/lime-barcodegen/utssdk';

export default {
  data() {
    return {
      text: '123456789012'
    }
  },
  mounted() {
    const el = this.$refs['barcodeRef'] as UniElement 
    renderer(el, this.text, {
      format: 'CODE128'
    } as LBarcodeGenOptions)
  }
}

自定义样式

可以自定义条形码的颜色、宽度、高度等样式。

<view ref="barcodeRef"></view>

import { renderer, type LBarcodeGenOptions } from '@/uni_modules/lime-barcodegen/utssdk';

export default {
  data() {
    return {
      text: '123456789012'
    }
  },
  mounted() {
    const el = this.$refs['barcodeRef'] as UniElement 
    renderer(el, this.text, {
      format: 'CODE128',
      lineColor: '#1989fa',
      width: 2,
      height: 100,
      background: '#f5f5f5'
    } as LBarcodeGenOptions)
  }
}

自定义文本位置

可以设置条形码下方文本的位置和样式。

<view ref="barcodeRef"></view>

import { renderer, LBarcodeGenOptions } from '@/uni_modules/lime-barcodegen/utssdk';

export default {
  data() {
    return {
      text: '123456789012'
    }
  },
  mounted() {
    const el = this.$refs['barcodeRef'] as UniElement 
    renderer(el, this.text, {
      format: 'CODE128',
      textPosition: 'top', // 文本显示在条形码上方
      textAlign: 'center',
      fontSize: 16,
      textMargin: 5
    } as LBarcodeGenOptions)
  }
}

不同条形码类型

支持多种条形码类型，如EAN13、CODE39、CODE128、codabar等。

<view ref="barcodeRef1"></view>
<view ref="barcodeRef2"></view>

import { renderer, LBarcodeGenOptions } from '@/uni_modules/lime-barcodegen/utssdk';

export default {
  mounted() {
    // EAN13条形码
    const el1 = this.$refs['barcodeRef1'] as UniElement 
    renderer(el1, '5901234123457', {
      format: 'EAN13'
    } as LBarcodeGenOptions)

    // CODE39条形码
    const el2 = this.$refs['barcodeRef2'] as UniElement 
    renderer(el2, 'CODE39', {
      format: 'CODE39'
    } as LBarcodeGenOptions)
  }
}

API文档

renderer 函数参数

LBarcodeGenOptions 配置选项

接口类型

export type LBarcodeGenOptions = {
  format ?: string
  width ?: number
  height ?: number
  /**
   * 显示value
   * @default true
   */
  displayValue ?: boolean
  text ?: string
  fontOptions ?: string
  font? : string
  textAlign? : string
  textPosition? : string
  textMargin? : number
  fontSize ?: number
  background? : string
  lineColor? : string
  margin ?: number
  marginTop ?: number
  marginBottom ?: number
  marginLeft ?: number
  marginRight ?: number
  flat ?: boolean
  ean128 ?: boolean
  mod43? : boolean
  lastChar ?: string
}

export type Encode = {
  data : string;
  text ?: string;
}

export type EncodeResultOptions = {
  textAlign ?: string
  fontSize ?: number
  height ?: number
}

export type EncodeResult = {
  data : string;
  text ?: string;
  width ?: number
  height ?: number
  barcodePadding ?: number
  options ?: LBarcodeGenOptions
}

export type LBarcodeRendererCallback = (result: EncodeResult) => void

支持的条形码类型

注意事项

1. 导入插件后需要自定义基座才能运行
2. 不同条形码类型对输入文本有不同的要求，请确保输入符合对应条形码类型的规范
3. 在使用前确保DOM元素已经渲染完成，建议在mounted或onReady生命周期中调用renderer函数

支持与赞赏

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

支付宝赞助	微信赞助