t-barcode

Barcode 条形码

组件介绍

t-barcode 是一个基于 Canvas 绘制的条形码生成组件，支持多种编码类型（如 EAN13、Codebar），可自定义样式和内容，适用于快速集成条形码显示功能。组件通过Canvas API绘制条形码，支持设置条形码内容、编码类型和上下间隙等属性。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/barcode/barcode.uvue，通过 text 属性设置条形码内容，使用 encode 属性设置编码类型。

<template>
  <!-- EAN13 条形码 -->
  <t-row class="bg-#fff r-20 p-20 mb-30">
    <t-barcode text="6901234567892" encode="ean13" class="twh-500-200"></t-barcode>
  </t-row>

  <!-- Codebar 条形码 -->
  <t-row class="bg-#fff r-20 p-20 mb-30">
    <t-barcode text="A12345B" encode="codebar" class="twh-500-200"></t-barcode>
  </t-row>

  <!-- 自定义间隙 -->
  <t-row class="bg-#fff r-20 p-20 mb-30">
    <t-barcode text="6901234567892" encode="ean13" :pading="30" class="twh-500-200"></t-barcode>
  </t-row>
</template>

Props

属性名	说明	类型	默认值
text	条形码内容	string	''
encode	编码类型，可选 ean13、codebar	string	'ean13'
pading	上下的间隙，单位是px	number	20

encode 说明

• ean13：国际通用物品编码，适用于商品条形码
• codebar：正常的数字字符条码，适用于各种标识场景

Events

事件名	说明	回调参数
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo