Button 按钮
Button 组件是一个高度可定制的按钮组件，它提供了一系列的 props 用于配置按钮的样式和行为。以下是其主要功能的概述：
样式和形状
- 类型（type）：按钮可以设置为不同的类型，如主要（primary）、成功（success）、信息（info）、警告（warning）和危险（error），以便于在不同场景中使用。
- 尺寸（size）：提供四种尺寸，大（large）、中（medium）、小（small）和迷你（mini），以满足不同的布局需求。
- 形状（shape）：可以选择圆形（circle）或方形（square）按钮，以适应不同的设计风格。
特效和状态
- 效果（effect）：按钮可以设置为正常（normal）、暗色（dark）、亮色（light）或镂空（plain）效果，以展现不同的视觉风格。
- 加载状态（loading）：支持自定义加载图标和模式，可以在按钮上显示加载指示器。
图标和文本
- 图标（prefixIcon/suffixIcon）：可以在按钮前或后添加图标，支持自定义图标颜色、大小和样式。
- 文本（text）：按钮可以显示文本内容，支持自定义文本颜色、大小和样式。
行为和交互
- 防抖和节流（debounce/throttle）：提供防抖和节流功能，用于限制按钮事件的触发频率，提高性能和用户体验。
- 阻止冒泡（stop）：可以阻止按钮事件向上冒泡，避免影响其他组件。
自定义样式
- 自定义样式（customStyle）：允许传入自定义样式对象，以便于对按钮进行精细的样式调整。
- 边框和背景：可以自定义边框的宽度、样式、颜色以及按钮的背景颜色。
状态和交互
- 禁用状态（disabled）：可以禁用按钮，使其不可点击。
- 悬浮状态（hover）：按钮可以有不同的悬浮效果，增强交互体验。
- 圆角（radius）：支持自定义圆角大小，以实现不同的视觉效果。
TButton 组件亮点
- 灵活性：TButton 组件提供了丰富的 props，允许开发者根据需求定制按钮的几乎每一个方面，从样式到行为。
- 易用性：组件的 API 设计简洁明了，易于理解和集成到现有的项目中。
- 性能优化：通过防抖和节流功能，TButton 组件能够帮助开发者有效地管理事件触发，避免性能问题。
- 响应式设计：组件支持不同的尺寸和形状，可以轻松适应不同的设备和屏幕尺寸。
- 交互体验：悬浮状态和加载指示器等特性增强了用户的交互体验，使按钮更加生动和引人注目。
支持平台
| 安卓 | ios | web | 微信小程序 | 支付宝小程序 | QQ小程序 |
|---|---|---|---|---|---|
| √ | √ | √ | x | x | x |
示例
html
<template>
<t-page title="按钮">
<t-card class="mltr.30" title="Button 按钮"
sub-title="TButton支持多种类型、尺寸、形状、特效和交互状态。支持图标、文本、自定义样式和状态控制，以及性能优化的防抖和节流功能。它适用于不同的场景和设计风格，提供灵活性和易用性，是构建交互式界面的理想选择。">
</t-card>
<introduction title="基础功能" v-if="area==1">
<t-button class="mb.30">默认按钮</t-button>
<t-button class="mb.30" type="primary">主要按钮</t-button>
<t-button class="mb.30" type="success">成功按钮</t-button>
<t-button class="mb.30" type="info">信息按钮</t-button>
<t-button class="mb.30" type="warning">警告按钮</t-button>
<t-button class="mb.30" type="error">危险按钮</t-button>
</introduction>
<introduction title="尺寸" v-if="area==2">
<t-button class="mb.30" size="mini" type="warning">警告按钮(迷你)</t-button>
<t-button class="mb.30" size="small" type="error">危险按钮(小)</t-button>
<t-button class="mb.30" size="medium" type="success">成功按钮(正常)</t-button>
<t-button class="mb.30" size="large" type="primary">主要按钮(大)</t-button>
</introduction>
<introduction title="定制" v-if="area==3">
<t-button class="mb.30-twhr.80" suffix-class="s.45" suf-view-class='ml.0' :iconHolder="false"
suffix-icon="server-fill" type="primary"></t-button>
<t-button class="mb.30-twhr.80" suffix-class="s.45" suf-view-class='ml.0' suffix-icon="checkbox-mark"
:iconHolder="false" type="success"></t-button>
<t-button class="mb.30-twhr.80" suffix-class="s.45" suf-view-class='ml.0' suffix-icon="star"
:iconHolder="false" type="warning"></t-button>
<t-button class="mb.30-twhr.80" suffix-class="s.45" suf-view-class='ml.0' suffix-icon="trash"
:iconHolder="false" type="error"></t-button>
</introduction>
<introduction title="镂空" v-if="area==4">
<t-button class="mb.30" effect="plain">默认按钮</t-button>
<t-button class="mb.30" effect="plain" type="primary">主要按钮</t-button>
<t-button class="mb.30" effect="plain" type="success">成功按钮</t-button>
<t-button class="mb.30" effect="plain" type="info">信息按钮</t-button>
<t-button class="mb.30" effect="plain" type="warning">警告按钮</t-button>
<t-button class="mb.30" effect="plain" type="error">危险按钮</t-button>
</introduction>
<introduction title="镂空+禁用边框" v-if="area==5">
<t-button class="mb.30" effect="plain" :border="false">默认按钮</t-button>
<t-button class="mb.30" effect="plain" :border="false" type="primary">主要按钮</t-button>
<t-button class="mb.30" effect="plain" :border="false" type="success">成功按钮</t-button>
<t-button class="mb.30" effect="plain" :border="false" type="info">信息按钮</t-button>
<t-button class="mb.30" effect="plain" :border="false" type="warning">警告按钮</t-button>
<t-button class="mb.30" effect="plain" :border="false" type="error">危险按钮</t-button>
</introduction>
<introduction title="浅色背景" v-if="area==6">
<t-button class="mb.30" effect="light">默认按钮</t-button>
<t-button class="mb.30" effect="light" type="primary">主要按钮</t-button>
<t-button class="mb.30" effect="light" type="success">成功按钮</t-button>
<t-button class="mb.30" effect="light" type="info">信息按钮</t-button>
<t-button class="mb.30" effect="light" type="warning">警告按钮</t-button>
<t-button class="mb.30" effect="light" type="error">危险按钮</t-button>
</introduction>
<introduction title="基础功能(带图标)1" v-if="area==7">
<t-col class="fc">
<t-button class="mb.30" suffixIcon="plus-circle" prefixIcon="map">默认</t-button>
<t-button class="mb.30" suffixIcon="plus-circle" prefixIcon="map" suffixIconolor="#fff"
type="success">成功按钮</t-button>
<t-button class=" mb.30" suffixIcon="plus-circle" prefixIcon="map" type="error">危险按钮</t-button>
<t-button class="mb.30" suffixIcon="plus-circle" prefixIcon="map" type="primary">主要按钮</t-button>
<t-button class="mb.30" suffixIcon="plus-circle" prefixIcon="map" type="warning">警告按钮</t-button>
</t-col>
</introduction>
<introduction title="loading(draw动画-默认动画类型)" v-if="area==8">
<t-button class="mb.30" type="e" loadingIcon="spinner" :loading="loading" :iconHolder="true"
loadingClass="s.60">加载中</t-button>
<t-button class="mb.30" loadingIcon="circular" type="success" :loading="loading"
:iconHolder="true">加载中</t-button>
<t-button @click="loading=!loading">{{loading?'关闭loading':'开启loading'}}</t-button>
</introduction>
<introduction title="loading(css动画)" v-if="area==9">
<t-button class="mb.30" loadingIcon="setting" loadingMode="icon" loadingClass="s.60" :iconHolder="true"
:loading="loading">加载中</t-button>
<t-button class="mb.30" loadingIcon="setting" loadingMode="icon" type="success" :loading="loading"
:iconHolder="true">加载中</t-button>
<t-button class="mb.30" loadingIcon="setting" loadingMode="icon" type="error" :loading="loading"
:iconHolder="true">加载中</t-button>
<t-button class="mb.30" loadingIcon="setting" loadingMode="icon" type="primary" :loading="loading"
:iconHolder="true">加载中</t-button>
<t-button class="mb.30" loadingIcon="setting" loadingMode="icon" type="warning" :loading="loading"
:iconHolder="true">加载中</t-button>
<t-button @click="loading=!loading">{{loading?'关闭loading':'开启loading'}}</t-button>
</introduction>
<introduction title="镂空按钮(带图标)" v-if="area==10">
<t-button class="mb.30" suffixIcon="plus-circle" prefixIcon="map">默认按钮</t-button>
<t-button class="mb.30" suffixIcon="plus-circle" prefixIcon="map" type="success">成功按钮</t-button>
<t-button class="mb.30" suffixIcon="plus-circle" prefixIcon="map" type="error">危险按钮</t-button>
<t-button class="mb.30" suffixIcon="plus-circle" prefixIcon="map" type="primary">主要按钮</t-button>
<t-button class="mb.30" suffixIcon="plus-circle" prefixIcon="map" type="warning">警告按钮</t-button>
</introduction>
<introduction title="基础功能(带图标)" v-if="area==11">
<t-button class="mb.30" prefixIcon="plus-circle">默认</t-button>
<t-button class="mb.30" prefixIcon="plus-circle" prefixIconColor="#fff" type="success">成功按钮</t-button>
<t-button class="mb.30" prefixIcon="plus-circle" type="error">危险按钮</t-button>
<t-button class="mb.30" prefixIcon="plus-circle" type="primary">主要按钮</t-button>
<t-button class="mb.30" prefixIcon="plus-circle" type="warning">警告按钮</t-button>
<t-button class="mb.30" prefixIcon="plus-circle" type="error" prefixIconColor="blue"
color="blue">颜色覆盖</t-button>
<t-button class="mb.30-bg.#0AB99C" prefixIcon="plus-circle" type="error">背景覆盖</t-button>
<t-button class="mb.30" prefixIcon="plus-circle" type="error" :border="false">去掉边框</t-button>
</introduction>
<introduction title="禁用按钮带背景" v-if="area==12">
<t-button class="mb.30" :disabled="true">默认按钮</t-button>
<t-button class="mb.30" :disabled="true" type="success">成功按钮</t-button>
<t-button class="mb.30" :disabled="true" type="error">危险按钮</t-button>
<t-button class="mb.30" :disabled="true" type="primary">主要按钮</t-button>
<t-button class="mb.30" :disabled="true" type="warning">警告按钮</t-button>
</introduction>
<introduction title="镂空按钮禁用" v-if="area==13">
<t-button class="mb.30" :disabled="true" type="info">默认按钮</t-button>
<t-button class="mb.30" :disabled="true" type="success">成功按钮</t-button>
<t-button class="mb.30" :disabled="true" type="error">危险按钮</t-button>
<t-button class="mb.30" :disabled="true" type="primary">主要按钮</t-button>
<t-button class="mb.30" :disabled="true" type="warning">警告按钮</t-button>
</introduction>
<introduction title="覆盖固定样式" v-if="area==14">
<t-button class="mb.30-bg.#0AB99C" text-class="c.#fff" type="info">覆盖背景</t-button>
<t-button class="mb.30-bg.#0AB99C" text-class="c.#ccc" type="info" :border="false">镂空覆盖测试</t-button>
</introduction>
<introduction title="禁用Hover" v-if="area==15">
<t-button class="mb.30" :hover="false" type="error">无点击效果</t-button>
</introduction>
<introduction title="设置宽高" v-if="area==16">
<t-button class="mb.30-h.120" type="error">自定义宽高</t-button>
</introduction>
<introduction title="圆形按钮" v-if="area==17">
<t-button class="mb.30-r.200" type="primary">圆角</t-button>
<t-button class="mb.30-r.200" type="error">圆角</t-button>
</introduction>
<introduction title="图标" v-if="area==18">
<t-button class="mb.30-w.250" width="250rpx" prefixIcon="photo" prefix-class="s.40"
type="error">图标</t-button>
</introduction>
<introduction title="防抖" v-if="area==19">
<t-button class="mb.30" @click="test" :tdTime="1000" :debounce="true"
type="error">防抖(在1000ms内，只有最后一次操作)</t-button>
<t-button class="mb.30" @click="test" :tdTime="1000" :throttle="true"
type="s">节流(在1000ms内，只能触发一次)</t-button>
</introduction>
<introduction title="节流" v-if="area==20">
<t-button class="mb.30" @click="test" :tdTime="1000" :debounce="true"
type="error">防抖(在1000ms内，只有最后一次操作)</t-button>
<t-button class="mb.30" @click="test" :tdTime="1000" :throttle="true"
type="s">节流(在1000ms内，只能触发一次)</t-button>
</introduction>
<t-row class='ffww-tdb-tdr-tdp-mltr.30'>
<t-button type="p" class="mrb.30" size="small" @click="area=1">基础功能</t-button>
<t-button type="e" class="mrb.30" size="small" @click="area=2">尺寸</t-button>
<t-button type="s" class="mrb.30" size="small" @click="area=3">定制</t-button>
<t-button type="w" class="mrb.30" size="small" @click="area=4">镂空</t-button>
<t-button type="p" class="mrbs.30" size="small" @click="area=5">镂空+禁用边框</t-button>
<t-button type="p" class="mrb.30" size="small" @click="area=6">浅色背景</t-button>
<t-button type="e" class="mrb.30" size="small" @click="area=7">基础功能(带图标)</t-button>
<t-button type="s" class="mrb.30" size="small" @click="area=8">loading(draw动画-默认动画类型)</t-button>
<t-button type="w" class="mrb.30" size="small" @click="area=9">loading(css动画)</t-button>
<t-button type="p" class="mrbs.30" size="small" @click="area=10">镂空按钮(带图标)</t-button>
<t-button type="p" class="mrb.30" size="small" @click="area=11">基础功能(带图标)</t-button>
<t-button type="e" class="mrb.30" size="small" @click="area=12">禁用按钮带背景</t-button>
<t-button type="s" class="mrb.30" size="small" @click="area=13">镂空按钮禁用</t-button>
<t-button type="w" class="mrb.30" size="small" @click="area=14">覆盖固定样式</t-button>
<t-button type="p" class="mrbs.30" size="small" @click="area=15">禁用Hover</t-button>
<t-button type="p" class="mrb.30" size="small" @click="area=16">设置宽高</t-button>
<t-button type="e" class="mrb.30" size="small" @click="area=17">圆形按钮</t-button>
<t-button type="s" class="mrb.30" size="small" @click="area=18">图标</t-button>
<t-button type="w" class="mrb.30" size="small" @click="area=19">防抖</t-button>
<t-button type="w" class="mrb.30" size="small" @click="area=20">节流</t-button>
</t-row>
</t-page>
</template>
<script setup>
const area = ref(1)
const loading = ref(true)
function test() {
console.log('防抖节流测试')
}
</script>Props
| 名称 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| textClass | 按钮文本的额外类名 | String | '' | - |
| prefixIcon | 前置图标的名称 | String | '' | - |
| prefixClass | 前置图标的额外类名 | String | '' | - |
| suffixIcon | 后置图标的名称 | String | '' | - |
| suffixClass | 后置图标的额外类名 | String | '' | - |
| loadingMode | 加载模式 | String | 'draw' | draw，icon |
| loading | 是否显示加载中状态 | Boolean | false | true, false |
| loadingIcon | 加载图标的名称 | String | 'spinner' | loadingMode=draw模式仅支持spinner,circular，loadingMode=icon 支持所有图标 |
| loadingClass | 加载图标的额外类名 | String | '' | - |
| prefixViewClass | 前置图标盒子的类名 | String | '' | - |
| sufViewClass | 后置图标盒子的类名 | String | '' | - |
| debounce | 是否开启防抖 | Boolean | false | true, false |
| throttle | 是否开启节流 | Boolean | false | true, false |
| tdTime | 防抖或节流时间，单位为毫秒 | Number | 500 | - |
| border | 是否显示边框 | Boolean | true | true, false |
| hover | 是否有鼠标悬停效果 | Boolean | true | true, false |
| iconHolder | 是否显示图标占位符 | Boolean | true | true, false |
| path | 跳转页面的路径 | String | '' | - |
Events
| 事件名 | 描述 | 回调参数 | 版本 |
|---|---|---|---|
| click | 点击按钮时触发 | - | - |
Slots
| 名称 | 描述 |
|---|---|
| default | 默认插槽，用于放置按钮文本内容 |