Button 按钮
代码示例
基础通用组件，用于标记一组操作命令，由用户点击触发，响应用户并完成相应的业务逻辑。
按钮类型
通过设置 type 属性的值为 primary、info、success、warning 和 error 来创建不同颜色的按钮，不设置时为默认样式。
<template>
<chi-button>Default</chi-button>
<chi-button type="primary">Primary</chi-button>
<chi-button type="info">Info</chi-button>
<chi-button type="success">Success</chi-button>
<chi-button type="warning">Warning</chi-button>
<chi-button type="error">Error</chi-button>
</template>禁用状态
添加 disabled 属性即可让按钮处于禁用状态。
<template>
<chi-button>Default</chi-button>
<chi-button disabled>Default</chi-button>
<chi-button type="primary">Primary</chi-button>
<chi-button type="primary" disabled>Primary</chi-button>
</template>简约风格
添加 simple 属性，使按钮变为简约风格，使用浅色系色调。
<template>
<chi-button simple>Default</chi-button>
<chi-button simple type="primary">Primary</chi-button>
<chi-button simple type="info">Info</chi-button>
<chi-button simple type="success">Success</chi-button>
<chi-button simple type="warning">Warning</chi-button>
<chi-button simple type="error">Error</chi-button>
<chi-button simple type="primary" disabled>Disabled</chi-button>
</template>透明按钮
添加 transparent 属性将按钮底色变为透明，常用在有色背景上。
<template>
<div style="padding: 20px; background-color: rgba(33, 42, 43)">
<chi-button transparent>Default</chi-button>
<chi-button transparent type="primary">Primary</chi-button>
<chi-button transparent type="info">Info</chi-button>
<chi-button transparent type="success">Success</chi-button>
<chi-button transparent type="warning">Warning</chi-button>
<chi-button transparent type="error">Error</chi-button>
<chi-button transparent disabled>Disabled</chi-button>
</div>
</template>文字按钮
添加 text 属性可以让按钮看起来和普通文字无异。
<template>
<chi-button text>Default</chi-button>
<chi-button text type="primary">Primary</chi-button>
<chi-button text type="info">Info</chi-button>
<chi-button text type="success">Success</chi-button>
<chi-button text type="warning">Warning</chi-button>
<chi-button text type="error">Error</chi-button>
<chi-button text disabled>Disabled</chi-button>
</template>虚线按钮
添加 dashed 属性可以将按钮变成虚线边框按钮。
<template>
<chi-button dashed>Default</chi-button>
<chi-button dashed type="primary">Primary</chi-button>
<chi-button dashed type="info">Info</chi-button>
<chi-button dashed type="success">Success</chi-button>
<chi-button dashed type="warning">Warning</chi-button>
<chi-button dashed type="error">Error</chi-button>
<chi-button dashed disabled>Disabled</chi-button>
</template>按钮大小
内置三种大小，通过 size 设置。
<template>
<chi-button type="primary" size="small">Small</chi-button>
<chi-button type="info" size="medium">Medium</chi-button>
<chi-button type="success" size="large">Large</chi-button>
<chi-button type="warning" style="--chi-button-height: 50px; --chi-button-h-padding: 22px"
>Custom</chi-button
>
</template>添加图标
通过 icon-before 及 icon-after 属性指定图标。
<template>
<chi-button type="primary" :icon-before="Search">搜索</chi-button>
<chi-button type="primary" :icon-before="Search"></chi-button>
<chi-button type="primary" :icon-before="Search" circle>搜索</chi-button>
<chi-button type="primary" :icon-before="Search" circle></chi-button>
<chi-button :icon-before="ArrowLeftToLine" :icon-after="ArrowRightToLine">扩展</chi-button>
</template>
<script setup>
import { ArrowLeftToLine, ArrowRightToLine, Search } from 'lucide-vue-next'
</script>加载状态
添加 loading 属性可以让按钮处于加载状态。
<template>
<chi-button loading type="primary">加载中</chi-button>
<chi-button type="primary" :loading="loading" @click="load">点一下我</chi-button>
<chi-button loading circle type="primary">加载中</chi-button>
<chi-button loading circle type="primary"></chi-button>
<chi-button loading circle>
<template #loader>
<chi-icon effect="spin-out" name="loader-circle"></chi-icon>
</template>
</chi-button>
</template>
<script setup>
import { ref } from 'vue'
const loading = ref(false)
function load() {
loading.value = true
setTimeout(() => {
loading.value = false
}, 3000)
}
</script>API
预设类型
ts
type ButtonAttrType = 'button' | 'submit' | 'reset'
type ButtonSize = 'small' | 'medium' | 'large'
type ButtonType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'Button 属性
| 名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| attr-type | ButtonAttrType | 设置原生 <button> 元素的 type 属性 | 'button' |
| block | boolean | 是否为块级元素，设置后宽度变为 100% | false |
| circle | boolean | 设置是否为圆形按钮 | false |
| disabled | boolean | 设置是否为禁用状态 | false |
| icon-after | LucideIcon | 按钮后置图标 | null |
| icon-before | LucideIcon | 按钮前置图标 | null |
| loading | boolean | 设置是否为加载状态 | false |
| simple | boolean | 开启后，按钮将变为浅色系的简约风格 | false |
| size | ButtonSize | 按钮的大小 | 'medium' |
| text | boolean | 设置是否为文本按钮 | false |
| transparent | boolean | 设置是否为透明按钮 | false |
| type | ButtonType | 设置按钮类型 | default |
Button 事件
| 名称 | 说明 | 参数 |
|---|---|---|
| click | 左键点击按钮时触发，返回点击的事件对象 | (event: MouseEvent) |
Button 插槽
| 名称 | 说明 | 参数 |
|---|---|---|
| default | 按钮的内容插槽 | |
| icon-after | 按钮后置图标插槽 | |
| icon-before | 按钮前置图标插槽 | |
| loader | 加载图标插槽 |