# t-barcode

Barcode 条形码

t-barcode 组件介绍

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

t-barcode 平台兼容

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

t-barcode 基础用法

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

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card title="BarCode" sub-title="Canvas绘制 组件是一个灵活的条形码生成器，支持多种编码类型，可自定义样式，适用于快速集成条形码显示。"
			class="tmb-15 mb-15"></t-card>
		<t-card title="EAN-13 标准条形码" sub-title="EAN-13 是一种国际通用的商品条形码标准，由13位数字组成。" class="tmb-15 tdb">
		</t-card>
		<t-barcode class="h-120" text="9876543210987"></t-barcode>
		<t-card title="Codebar 特殊用途条形码" sub-title="Codebar（代码39）条形码常用于物流、图书管理和其他特殊领域。" class="tmb-15 tdb mb-15">

		</t-card>
		<t-barcode class="h-120" encode="codebar" text="9876543210987"></t-barcode>
	</view>
</template>

t-barcode Props

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

encode 说明

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

t-barcode Events

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