Tu View PlusButton 按钮
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
基础用法
使用 type、plain、round 和 circle 属性来定义 Button 的样式。
<template>
<tu-row class="mb-2">
<tu-button>默认按钮</tu-button>
<tu-button type="primary">主要按钮</tu-button>
<tu-button type="success">成功按钮</tu-button>
<tu-button type="info">信息按钮</tu-button>
<tu-button type="warning">警告按钮</tu-button>
<tu-button type="danger">危险按钮</tu-button>
</tu-row>
<tu-row class="mb-2">
<tu-button round>默认按钮</tu-button>
<tu-button type="primary" round>主要按钮</tu-button>
<tu-button type="success" round>成功按钮</tu-button>
<tu-button type="info" round>信息按钮</tu-button>
<tu-button type="warning" round>警告按钮</tu-button>
<tu-button type="danger" round>危险按钮</tu-button>
</tu-row>
<tu-row>
<tu-button circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="success" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="primary" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="info" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="warning" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="danger" circle>
<template #icon><Search /></template>
</tu-button>
</tu-row>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script><template>
<tu-row class="mb-2">
<tu-button>默认按钮</tu-button>
<tu-button type="primary">主要按钮</tu-button>
<tu-button type="success">成功按钮</tu-button>
<tu-button type="info">信息按钮</tu-button>
<tu-button type="warning">警告按钮</tu-button>
<tu-button type="danger">危险按钮</tu-button>
</tu-row>
<tu-row class="mb-2">
<tu-button round>默认按钮</tu-button>
<tu-button type="primary" round>主要按钮</tu-button>
<tu-button type="success" round>成功按钮</tu-button>
<tu-button type="info" round>信息按钮</tu-button>
<tu-button type="warning" round>警告按钮</tu-button>
<tu-button type="danger" round>危险按钮</tu-button>
</tu-row>
<tu-row>
<tu-button circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="success" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="primary" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="info" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="warning" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="danger" circle>
<template #icon><Search /></template>
</tu-button>
</tu-row>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script>禁用状态
按钮不可用状态。可以使用 disabled 属性来定义按钮是否可用，它接受一个 Boolean 值。
<template>
<tu-row>
<tu-button disabled>默认按钮</tu-button>
<tu-button type="primary" disabled>主要按钮</tu-button>
<tu-button type="success" disabled>成功按钮</tu-button>
<tu-button type="info" disabled>信息按钮</tu-button>
<tu-button type="warning" disabled>警告按钮</tu-button>
<tu-button type="danger" disabled>危险按钮</tu-button>
</tu-row>
</template><template>
<tu-row>
<tu-button disabled>默认按钮</tu-button>
<tu-button type="primary" disabled>主要按钮</tu-button>
<tu-button type="success" disabled>成功按钮</tu-button>
<tu-button type="info" disabled>信息按钮</tu-button>
<tu-button type="warning" disabled>警告按钮</tu-button>
<tu-button type="danger" disabled>危险按钮</tu-button>
</tu-row>
</template>Text Button
没有边框和背景色的按钮。
<template>
<tu-button type="text">文字按钮</tu-button>
<tu-button type="text" disabled>文字按钮</tu-button>
</template><template>
<tu-button type="text">文字按钮</tu-button>
<tu-button type="text" disabled>文字按钮</tu-button>
</template>图标按钮
带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
<template>
<tu-button>
<template #icon><Search /></template>
</tu-button>
<tu-button>
<template #icon><Search /></template>
搜索
</tu-button>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script><template>
<tu-button>
<template #icon><Search /></template>
</tu-button>
<tu-button>
<template #icon><Search /></template>
搜索
</tu-button>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script>按钮组
以按钮组的方式出现，常用于多项类似操作。使用 `<tu-button-group>` 标签来嵌套你的按钮。
<template>
<tu-button-group>
<tu-button>上一页</tu-button>
<tu-button>下一页</tu-button>
</tu-button-group>
<tu-button-group type="primary">
<tu-button>上一页</tu-button>
<tu-button>下一页</tu-button>
</tu-button-group>
</template><template>
<tu-button-group>
<tu-button>上一页</tu-button>
<tu-button>下一页</tu-button>
</tu-button-group>
<tu-button-group type="primary">
<tu-button>上一页</tu-button>
<tu-button>下一页</tu-button>
</tu-button-group>
</template>加载中
点击按钮后进行数据加载操作，在按钮上显示加载状态。要设置为 loading 状态，只要设置 loading 属性为 true 即可。
<template>
<tu-button loading>加载中</tu-button>
<tu-button loading :loading-icon="Tools"> 加载中 </tu-button>
<tu-button type="primary" loading>加载中</tu-button>
</template>
<script lang="ts" setup>
import { Tools } from '@tu-view-plus/icons-vue';
</script><template>
<tu-button loading>加载中</tu-button>
<tu-button loading :loading-icon="Tools"> 加载中 </tu-button>
<tu-button type="primary" loading>加载中</tu-button>
</template>
<script lang="ts" setup>
import { Tools } from '@tu-view-plus/icons-vue';
</script>长按钮
通过设置 long 属性，使按钮的宽度跟随容器的宽度。
<template>
<tu-space :size="12" direction="vertical" fill>
<tu-button long>默认按钮</tu-button>
<tu-button type="primary" long>主要按钮</tu-button>
<tu-button type="success" long>成功按钮</tu-button>
<tu-button type="info" long>信息按钮</tu-button>
<tu-button type="warning" long>警告按钮</tu-button>
<tu-button type="danger" long>危险按钮</tu-button>
</tu-space>
</template><template>
<tu-space :size="12" direction="vertical" fill>
<tu-button long>默认按钮</tu-button>
<tu-button type="primary" long>主要按钮</tu-button>
<tu-button type="success" long>成功按钮</tu-button>
<tu-button type="info" long>信息按钮</tu-button>
<tu-button type="warning" long>警告按钮</tu-button>
<tu-button type="danger" long>危险按钮</tu-button>
</tu-space>
</template>不同尺寸
tu-button 组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸：large、small、mini，通过设置 size 属性来配置它们。
<template>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button size="small" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button circle>
<template #icon><Search /></template>
</tu-button>
<tu-button size="large" circle>
<template #icon><Search /></template>
</tu-button>
</tu-row>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini">超小按钮</tu-button>
<tu-button size="small">小型按钮</tu-button>
<tu-button>默认按钮</tu-button>
<tu-button size="large">大型按钮</tu-button>
</tu-row>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini" round>超小按钮</tu-button>
<tu-button size="small" round>小型按钮</tu-button>
<tu-button round>默认按钮</tu-button>
<tu-button size="large" round>大型按钮</tu-button>
</tu-row>
<tu-row class="demo-button-row">
<tu-button-group size="mini">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group size="small">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group>
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group size="large">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
</tu-row>
</template>
<script lang="ts" setup>
import { Search, ArrowLeft, ArrowRight } from '@tu-view-plus/icons-vue';
</script>
<style>
.demo-button-row {
align-items: baseline;
}
</style><template>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button size="small" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button circle>
<template #icon><Search /></template>
</tu-button>
<tu-button size="large" circle>
<template #icon><Search /></template>
</tu-button>
</tu-row>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini">超小按钮</tu-button>
<tu-button size="small">小型按钮</tu-button>
<tu-button>默认按钮</tu-button>
<tu-button size="large">大型按钮</tu-button>
</tu-row>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini" round>超小按钮</tu-button>
<tu-button size="small" round>小型按钮</tu-button>
<tu-button round>默认按钮</tu-button>
<tu-button size="large" round>大型按钮</tu-button>
</tu-row>
<tu-row class="demo-button-row">
<tu-button-group size="mini">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group size="small">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group>
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group size="large">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
</tu-row>
</template>
<script lang="ts" setup>
import { Search, ArrowLeft, ArrowRight } from '@tu-view-plus/icons-vue';
</script>
<style>
.demo-button-row {
align-items: baseline;
}
</style>Button API
Button Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| size | 尺寸 | String | medium |
| type | 类型 | String | - |
| round | 是否圆角按钮 | Boolean | false |
| circle | 是否圆形按钮 | Boolean | false |
| long | 按钮的宽度是否随容器自适应。 | Boolean | false |
| loading | 是否加载中状态 | Boolean | false |
| loading-icon | 自定义加载图标 | String Component | Loading |
| disabled | 是否禁用状态 | Boolean | false |
| icon | 图标组件 | String Component | - |
| autofocus | 原生属性，自动获取焦点 | Boolean | false |
| native-type | 原生属性，按钮类型 | String | button |
Button Slots
| 参数名 | 描述 |
|---|---|
| default | 自定义默认内容 |
| loading | 自定义加载中组件 |
| icon | 自定义图标 |
Button Exposes
| 参数名 | 描述 | 类型 |
|---|---|---|
| ref | 按钮元素 | Object |
| size | 按钮尺寸 | Object |
| type | 按钮类型 | Object |
| disabled | 按钮禁用 | Object |
ButtonGroup API
ButtonGroup Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| size | 按钮组尺寸 | String | - |
| type | 按钮组类型 | String | - |
ButtonGroup Slots
| 参数名 | 描述 | 类型 |
|---|---|---|
| default | 自定义按钮组内容 | Button |