❮
EDA All-in-one

Appearance

YqButton

YqButton 是一个功能丰富、样式灵活的 Vue 3 按钮组件。它基于 Element Plus 或 Ant Design 等 UI 库的优秀设计理念，提供了包括多种颜色、尺寸、状态和图标支持，旨在帮助开发者快速构建美观且易于交互的用户界面。

1 默认按钮

最基本的按钮，不带任何属性：

vue
<template>
  <YqButton>默认按钮</YqButton>
</template>

2 不同类型 (type)

通过 type 属性可以设置按钮的视觉主题，常用于区分操作的重要性或类型。

  • 可选值： primary, success, warning, danger, info
  • 示例：
vue
<template>
  <YqButton type="primary">主要操作</YqButton>
  <YqButton type="success">成功提交</YqButton>
  <YqButton type="warning">警告提示</YqButton>
  <YqButton type="danger">删除操作</YqButton>
  <YqButton type="info">普通信息</YqButton>
</template>

3 不同尺寸 (size)

通过 size 属性调整按钮的显示大小，以适应不同的布局和内容密度。

  • 可选值： large, small (默认尺寸无需设置)
  • 示例：
vue
<template>
  <YqButton size="large">大号按钮</YqButton>
  <YqButton>默认尺寸</YqButton>
  <YqButton size="small">小号按钮</YqButton>
</template>

4 朴素按钮 (plain)

plain 属性使按钮呈现更简洁的朴素风格，通常用于次要操作或与背景色区分。

  • 用法： 添加 plain 属性即可。
  • 示例：
vue
<template>
  <YqButton type="primary" plain>朴素主要</YqButton>
  <YqButton type="success" plain>朴素成功</YqButton>
</template>

5 圆角按钮 (round)

round 属性为按钮添加圆角边框，使其外观更柔和。

  • 用法： 添加 round 属性即可。
  • 示例：
vue
<template>
  <YqButton round>圆角按钮</YqButton>
</template>

6 圆形按钮 (circle)

circle 属性将按钮变为圆形，通常用于图标按钮或缩略操作。

  • 用法： 添加 circle 属性即可。
  • 示例：
vue
<template>
  <YqButton circle>V</YqButton>
</template>

7 状态控制

7.1 禁用状态 (disabled)

使用 disabled 属性可以使按钮不可点击，并显示禁用样式。

  • 用法： 添加 disabled 属性即可。
  • 示例：
vue
<template>
  <YqButton disabled>不可操作</YqButton>
</template>

7.2 加载状态 (loading)

loading 属性会使按钮进入加载状态：按钮被禁用，并显示一个旋转的加载图标。这常用于提交表单或执行耗时操作时，给出用户反馈。

  • 用法： 添加 loading 属性即可。
  • 示例：
vue
<template>
  <YqButton loading>正在加载...</YqButton>
  <YqButton type="primary" loading>正在提交...</YqButton>
</template>

8 配合图标使用

YqButton 可以方便地与 YqIcon 组件（或任何 Font Awesome 图标）结合使用。 通过 icon 属性，直接在按钮中嵌入 Font Awesome 图标。

  • 用法： 传入 Font Awesome 的图标名称字符串，例如 "fa-solid fa-home"。
  • 示例：
vue
<template>
  <YqButton icon="fa-solid fa-download">下载文件</YqButton>
  <YqButton type="primary" icon="fa-solid fa-save">保存</YqButton>
</template>

注意： 当 loading 属性为 true 时，icon 属性指定的图标将被加载图标覆盖。

9 事件处理

YqButton 组件支持标准的 Vue 事件，最常用的是 @click 事件，用于响应用户点击操作。

vue
<template>
  <YqButton type="primary" @click="handleButtonClick">点击执行操作</YqButton>
</template>

<script setup>
const handleButtonClick = () => {
  alert("按钮被点击了！");
  // 在这里可以执行更复杂的逻辑，如调用 API、更新状态等
};
</script>

10 属性概览

属性名说明类型默认值
type按钮的主题类型（primary, success, warning, danger, info）"primary" | "success" | "warning" | "danger" | "info"undefined
size按钮尺寸（large, small）"large" | "small"undefined
plain是否为朴素按钮样式booleanfalse
round是否为圆角按钮样式booleanfalse
circle是否为圆形按钮样式booleanfalse
disabled是否禁用按钮booleanfalse
nativeType按钮的原生 type 属性（button, submit, reset）"button" | "submit" | "reset""button"
autofocus页面加载时是否自动获取焦点booleanfalse
icon按钮内嵌的 Font Awesome 图标名称（如 "fa-solid fa-home"）stringundefined
loading是否显示加载状态（禁用并显示加载图标）booleanfalse