Skip to content

Barcode (条形码)

Canvas绘制 组件是一个灵活的条形码生成器,支持多种编码类型,可自定义样式,适用于快速集成条形码显示。

支持平台

安卓ios鸿蒙web微信小程序

示例代码

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

		</t-card>
		<t-barcode main-class="h-240" encode="codebar" text="9876543210987"></t-barcode>
	</t-page>
</template>

属性

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡(Tui统一写法处理事件冒泡)false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径,如果为空则响应点击事件,如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
encodeStringean13codebar正常的数字字符条码
ean13国际通用物品编码
textString``条形码内容
padingNumber20上下的间隙,单位是px