TuButton 按钮
type / size / disabled / loading / block / plain / round,点击通过 click 事件回传。
跨端按钮:主题色实心 / 中性 / 朴素描边等五种类型,支持加载态与禁用。完全受控:点击通过 click 自定义事件通知父级(父级用 emitters 订阅)。
属性
| 名称 | 类型 | 说明 |
|---|---|---|
type | default | primary | success | warning | danger | 按钮类型,默认 default(中性底色)。 |
size | small | medium | large | 尺寸,默认 medium。 |
disabled | boolean | 禁用:不响应点击,半透明。 |
loading | boolean | 加载中:不响应点击,内容替换为 loadingText。 |
loadingText | string | 加载文案,默认「加载中…」。 |
block | boolean | 块级:占满父容器宽度。 |
plain | boolean | 朴素:透明底 + 描边 + 主题色文字。 |
round | boolean | 圆角胶囊(999px)。 |
children | Array<VNode | string> | 按钮内容(插槽)。 |
事件:click(disabled / loading 时不触发)。
已点击 0 次 · 当前类型 primary · 点击按钮会依次切换 default → primary → success → warning → danger,click 事件由父级(demo 宿主)维护状态。
实例
ts
createComponent({
component: TuButton,
props: { type: 'primary', loading: this.state.saving },
children: ['保存'],
emitters: { click: () => this.save() },
})