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>
属性
名称 | 类型 | 默认值 | 说明 | 可选值 |
---|---|---|---|---|
size | String | mini | 组件尺寸 | large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你) |
type | String | "" | 组件类型 | info(信息), primary(正常), error(错误), warning(警告), success(成功) |
disabled | Boolean | false | 组件是否禁用 | false, true |
stop | Boolean | false | 是否阻止事件冒泡(Tui统一写法处理事件冒泡) | false, true |
hover | Boolean | true | 是否有点击效果 | false, true |
path | String | "" | 点击组件后跳转的页面路径,如果为空则响应点击事件,如果不为空则跳转页面不会响应单击事件。 | - |
mainClass | String | "" | 组件根节点的样式 | - |
nativeClass | String | "" | 组件根节点原生样式 | - |
effect | String | "normal" | 组件显示主题 | normal(正常), dark(深色), light(浅色), plain(镂空) |
encode | String | ean13 | codebar正常的数字字符条码 | |
ean13国际通用物品编码 | ||||
text | String | `` | 条形码内容 | |
pading | Number | 20 | 上下的间隙,单位是px |