Button 按钮

通用操作按钮，支持多种类型、尺寸 and 形态，适用于中后台界面。

基本使用

<template>
  <div style="display: flex; gap: 10px">
    <AiButton>默认按钮</AiButton>
    <AiButton type="primary">主要按钮</AiButton>
  </div>
</template>

按钮尺寸

<template>
  <div style="display: flex; gap: 10px; flex-wrap: wrap">
    <AiButton size="small" type="primary">小型按钮</AiButton>
    <AiButton type="primary">默认按钮</AiButton>
    <AiButton size="large" type="primary">大型按钮</AiButton>
  </div>
</template>

禁用与加载

<template>
  <div style="display: flex; gap: 10px">
    <AiButton type="primary" disabled>禁用按钮</AiButton>
    <AiButton type="primary" loading>加载中</AiButton>
  </div>
</template>

按钮形态

按钮支持多种形态：朴素按钮（描边风格）、圆角按钮、圆形按钮（常用于图标按钮）和链接按钮。

朴素按钮

圆角按钮

圆形按钮（图标按钮）

链接按钮

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; width: 100%">
    <div>
      <h4 style="margin: 0 0 12px 0; font-size: 14px; color: #666">朴素按钮</h4>
      <div style="display: flex; gap: 12px; align-items: center">
        <AiButton plain type="primary">主要按钮</AiButton>
        <AiButton plain type="success">成功按钮</AiButton>
        <AiButton plain type="warning">警告按钮</AiButton>
        <AiButton plain type="danger">危险按钮</AiButton>
      </div>
    </div>
    <div>
      <h4 style="margin: 0 0 12px 0; font-size: 14px; color: #666">圆角按钮</h4>
      <div style="display: flex; gap: 12px; align-items: center">
        <AiButton round type="primary">圆角按钮</AiButton>
        <AiButton round type="success">圆角按钮</AiButton>
        <AiButton round type="warning">圆角按钮</AiButton>
      </div>
    </div>
    <div>
      <h4 style="margin: 0 0 12px 0; font-size: 14px; color: #666">圆形按钮（图标按钮）</h4>
      <div style="display: flex; gap: 12px; align-items: center">
        <AiButton circle type="primary" :icon="Edit" />
        <AiButton circle type="success" :icon="Edit" />
        <AiButton circle type="danger" :icon="Delete" />
        <AiButton circle type="warning" :icon="Loading" />
      </div>
    </div>
    <div>
      <h4 style="margin: 0 0 12px 0; font-size: 14px; color: #666">链接按钮</h4>
      <div style="display: flex; gap: 12px; align-items: center">
        <AiButton link type="primary">链接按钮</AiButton>
        <AiButton link type="success">链接按钮</AiButton>
        <AiButton link type="danger">链接按钮</AiButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, Delete, Loading } from '@axin666/ai-ui-icons'
</script>

图标按钮

按钮支持通过 icon 属性添加图标，也可以配合 @axin666/ai-ui-icons 图标包使用：

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <div style="display: flex; align-items: center; gap: 12px">
      <AiButton type="primary" :icon="Edit"> 编辑 </AiButton>
      <AiButton type="danger" :icon="Delete"> 删除 </AiButton>
    </div>
    <div style="display: flex; align-items: center; gap: 12px">
      <AiButton type="primary" plain :icon="Edit"> 编辑 </AiButton>
      <AiButton type="text" :icon="Delete"> 删除 </AiButton>
    </div>
    <div style="display: flex; align-items: center; gap: 12px">
      <AiButton type="primary" :loading="loading" @click="handleClick"> 加载中 </AiButton>
      <AiButton type="success" :icon="Edit" :loading="loading2" @click="handleClick2">
        保存
      </AiButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Edit, Delete } from '@axin666/ai-ui-icons'

const loading = ref(false)
const loading2 = ref(false)

function handleClick() {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}

function handleClick2() {
  loading2.value = true
  setTimeout(() => {
    loading2.value = false
  }, 2000)
}
</script>

Props

属性	说明	类型	默认值
type	按钮类型	'' | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'	''
size	按钮尺寸	'' | 'default' | 'small' | 'large'	''
nativeType	原生 type 属性	'button' | 'submit' | 'reset'	button
plain	朴素按钮（描边/幽灵风格）	boolean	false
round	是否圆角	boolean	false
circle	是否圆形（常用于图标按钮）	boolean	false
loading	是否加载中	boolean	false
loadingIcon	自定义加载图标	string | Component	-
disabled	是否禁用	boolean	false
icon	图标	string | Component	-
autofocus	自动聚焦	boolean	false
link	是否为链接/文字按钮	boolean	false
color	自定义颜色	string	-
dark	是否为深色模式	boolean	false

Events

事件名	说明	回调参数
click	点击事件	(event: MouseEvent)