Button (按钮)
按钮组件，封装了常用的按钮样式和行为。它支持多种类型（如主要、次要、危险等）、尺寸，并能响应点击事件。开发者可以通过简单的属性配置来定制按钮的外观和功能，轻松集成到 Vue 项目中，保持界面风格统一。
支持平台
| 安卓 | ios | 鸿蒙 | web | 微信小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page>
<introduction title="主题+type">
<t-button main-class="mb-30">默认按钮</t-button>
<t-button main-class="mb-30" type="primary" :disabled="disabled">主要按钮</t-button>
<t-button main-class="mb-30" type="success" @click="disabled=!disabled">成功按钮</t-button>
<t-button main-class="mb-30" type="info">信息按钮</t-button>
<t-button main-class="mb-30" type="warning" @click="test1">警告按钮</t-button>
<t-button main-class="mb-30" type="error">危险按钮</t-button>
</introduction>
<introduction title="主题+effect">
<t-button main-class="mb-30" type="primary" effect="normal">主要按钮</t-button>
<t-button main-class="mb-30" type="primary" effect="dark">成功按钮</t-button>
<t-button main-class="mb-30" type="primary" effect="disabled">信息按钮</t-button>
<t-button main-class="mb-30" type="primary" effect="light">警告按钮</t-button>
<t-button main-class="mb-30" type="primary" effect="plain">危险按钮</t-button>
</introduction>
<introduction title="主题+size">
<t-button main-class="mb-30" left-icon="/pagesA/static/grid/grid (1).png" type="primary"
size="large">主要按钮</t-button>
<t-button main-class="mb-30" left-icon="/pagesA/static/grid/grid (2).png" type="primary"
size="medium">成功按钮</t-button>
<t-button main-class="mb-30" left-icon="/pagesA/static/grid/grid (3).png" type="primary"
size="small">信息按钮</t-button>
<t-button main-class="mb-30" left-icon="/pagesA/static/grid/grid (4).png" type="primary"
size="mini">警告按钮</t-button>
</introduction>
<introduction title="主题+size">
<t-row main-class="fww">
<t-button main-class="mrb-30" type="primary" left-icon="/pagesA/static/grid/grid (1).png" :loading="loading"
size="large">主要按钮</t-button>
<t-button main-class="mrb-30" type="primary" left-icon="/pagesA/static/grid/grid (2).png" size="medium"
@click="test">成功按钮</t-button>
<t-button main-class="mrb-30" type="primary" left-icon="/pagesA/static/grid/grid (3).png"
size="small">信息按钮</t-button>
<t-button main-class="mrb-30" type="primary" left-icon="/pagesA/static/grid/grid (4).png"
size="mini">警告按钮</t-button>
</t-row>
</introduction>
<introduction title="主题+size">
<t-col>
<t-button main-class="mrb-30" type="primary" left-icon="/pagesA/static/grid/grid (1).png" :loading="loading"
:iconHolder="true" size="large">主要按钮</t-button>
<t-button main-class="mrb-30" type="primary" left-icon="/pagesA/static/grid/grid (2).png" size="medium"
@click="test">成功按钮</t-button>
<t-button main-class="mrb-30" type="primary" left-icon="/pagesA/static/grid/grid (3).png"
size="small">信息按钮</t-button>
<t-button main-class="mrb-30" type="primary" left-icon="/pagesA/static/grid/grid (4).png"
size="mini">警告按钮</t-button>
</t-col>
</introduction>
<introduction title="loading">
<t-button main-class="mb-30" :loading="true" loading-icon="spinner">默认按钮</t-button>
<t-button main-class="mb-30" type="primary" :loading="true" loading-icon="circular">主要按钮</t-button>
<t-button main-class="mb-30" type="success" :loading="true" loading-icon="setting">成功按钮</t-button>
<t-button main-class="mb-30" type="info" :loading="true"
loading-icon="/pagesA/static/grid/grid (4).png">信息按钮</t-button>
</introduction>
<introduction title="loading-size=large">
<t-button main-class="mb-30" size="large" :loading="true" loading-icon="spinner">默认按钮</t-button>
<t-button main-class="mb-30" size="large" type="primary" :loading="true"
loading-icon="circular">主要按钮</t-button>
<t-button main-class="mb-30" size="large" type="success" :loading="true"
loading-icon="setting">成功按钮</t-button>
<t-button main-class="mb-30" size="large" type="info" :loading="true"
loading-icon="/pagesA/static/grid/grid (4).png">信息按钮</t-button>
</introduction>
<introduction title="镂空">
<t-button main-class="mb-30" effect="plain">默认按钮</t-button>
<t-button main-class="mb-30" effect="plain" type="primary">主要按钮</t-button>
<t-button main-class="mb-30" effect="plain" type="success">成功按钮</t-button>
<t-button main-class="mb-30" effect="plain" type="info">信息按钮</t-button>
<t-button main-class="mb-30" effect="plain" type="warning">警告按钮</t-button>
<t-button main-class="mb-30" effect="plain" type="error">危险按钮</t-button>
</introduction>
<introduction title="浅色背景">
<t-button main-class="mb-30" effect="light">默认按钮</t-button>
<t-button main-class="mb-30" effect="light" type="primary">主要按钮</t-button>
<t-button main-class="mb-30" effect="light" type="success">成功按钮</t-button>
<t-button main-class="mb-30" effect="light" type="info">信息按钮</t-button>
<t-button main-class="mb-30" effect="light" type="warning">警告按钮</t-button>
<t-button main-class="mb-30" effect="light" type="error">危险按钮</t-button>
</introduction>
<introduction title="定制">
<t-button main-class="mb-30 w-150" type="error">危险按钮</t-button>
<t-button main-class="mb-30 twhr-80" text-class="m-0" right-icon-class="s-45" right-icon="server-fill"
type="primary"></t-button>
<t-button main-class="mb-30 twhr-180" text-class="m-0" right-icon-class="s-85" right-icon="checkbox-mark"
type="success"></t-button>
<t-button main-class="mb-30 twhr-80" text-class="m-0" right-icon-class="s-45" right-icon="star"
type="warning"></t-button>
<t-button main-class="mb-30 twhr-80" text-class="m-0" right-icon-class="s-45" right-icon="trash"
type="error"></t-button>
</introduction>
<introduction title="自定义样式覆盖主题">
<t-button main-class="mb-30 bg-#0AB99C" text-class="c-#fff">覆盖背景</t-button>
<t-button main-class="mb-30 r-180 ptb-30 bil-#ff667f,#fdb247" text-class="c-#fff">镂空覆盖测试</t-button>
<t-button main-class="mb-30 r-180 ptb-30 bil-#a531dc,#4300b1" text-class="c-#fff">镂空覆盖测试</t-button>
</introduction>
<introduction title="简易跳转功能">
<t-button type="p" path="/pages/components/form/input/input">跳转</t-button>
</introduction>
<introduction title="防抖-节流">
<t-button type="p" main-class="mb-30" @click="test1" :tdTime="1000"
:debounce="true">防抖(在1000ms内，只有最后一次操作)</t-button>
<t-button type="p" @click="test1" :tdTime="1000" :throttle="true">节流(在1000ms内，只能触发一次)</t-button>
</introduction>
</t-page>
</template>
<script setup>
const loading = ref(true)
const disabled = ref(true)
function test1() {
console.log('test')
}
function test() {
loading.value = !loading.value
}
</script>属性
| 名称 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| 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(镂空) |
| rightIcon | String | `` | 右侧图标 | |
| loading | Boolean | false | 是否显示loading加载动画 | |
| loadingClass | String | `` | 加载动画的样式 | |
| throttle | Boolean | false | 是否节流 | |
| border | Boolean | false | 是否显示边框 | |
| iconHolder | Boolean | false | 是图在不设置图标的时候占住位置 | |
| leftIcon | String | `` | 左侧图标 | |
| textAttrs | UTSJSONObject | {} | 按钮文字的属性 支持t-text的所有属性 | |
| textClass | String | `` | 按钮文字的样式 | |
| rightIconClass | String | `` | 右侧图标样式 | |
| loadingIcon | String | spinner | 加载动画的图标 | |
| debounce | Boolean | false | 是否防抖 | |
| tdTime | Number | 500 | 防抖节流的时间设置 | |
| hover | Boolean | true | 是否显示点击效果 | |
| leftIconClass | String | `` | 左侧图标样式 |
事件
| 名称 | 返回参数 | 说明 |
|---|---|---|
| leftClick | - | 左侧图标单击时触发 |
| click | (e : UniPointerEvent) | 按钮单击时触发 |
| rightClick | - | 右侧图标单击时触发 |
插槽
| 名称 | 返回值 | 说明 |
|---|---|---|
| default | - |