按钮 Button

介绍

按钮组件用于触发一个操作，如提交表单。

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

代码演示

基本使用

这是一个button按钮最基本的使用例子

<script setup lang="ts">
function myClick() {
  console.log('myClick')
}
</script>

<template>
  <div style="display: flex;gap: 10px;">
    <t-button @click="myClick">
      按钮1
    </t-button>
    <t-button type="primary" @click="myClick">
      按钮2
    </t-button>
    <t-button type="dashed">
      按钮3
    </t-button>
  </div>
</template>

<script setup lang="ts">
function myClick() {
  console.log('myClick')
}
</script>

<template>
  <div style="display: flex;gap: 10px;">
    <t-button @click="myClick">
      按钮1
    </t-button>
    <t-button type="primary" @click="myClick">
      按钮2
    </t-button>
    <t-button type="dashed">
      按钮3
    </t-button>
  </div>
</template>

禁用按钮

设置disabled属性为true即可禁用按钮

<script setup lang="ts">
</script>

<template>
  <div>
    <t-button disabled>
      按钮
    </t-button>
  </div>
</template>

<script setup lang="ts">
</script>

<template>
  <div>
    <t-button disabled>
      按钮
    </t-button>
  </div>
</template>

按钮大小

你可以通过设置size属性来改变按钮的大小，默认为default，可选值为small和large

<script setup lang="ts">
</script>

<template>
  <div style="display: flex;gap: 10px">
    <t-button size="small">
      小按钮
    </t-button>
    <t-button>
      正常
    </t-button>
    <t-button size="large">
      大按钮
    </t-button>
  </div>
</template>

<script setup lang="ts">
</script>

<template>
  <div style="display: flex;gap: 10px">
    <t-button size="small">
      小按钮
    </t-button>
    <t-button>
      正常
    </t-button>
    <t-button size="large">
      大按钮
    </t-button>
  </div>
</template>

属性

属性	说明	类型	默认值
type	设置按钮类型	default	primary
size	设置按钮大小	default	small
disabled	设置按钮失效状态	boolean	false

事件

事件	说明	类型
click	点击的时候触发的事件	(event:MouseEvent) => void