文档

Appearance

按钮 ​

下面是基于 Ant Design Vue 3 的二次封装按钮组件（参考文档）

何时使用 ​

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

我们提供了五种按钮：
  • 主按钮（primary）：最常用的实心按钮，颜色填充明显。强调交互行为，适合主要操作，如保存、查询按钮。
  • 线框按钮（outline）：线框风格，按钮内部是透明的，仅边框有颜色。适合次要辅助操作，如取消。
  • 浅色按钮（light）：具有浅色背景，颜色比实心按钮柔和，边框和背景颜色一致。适合在浅色背景下使用，保持界面简洁，如卡片操作中的选项。
  • 链接按钮（link）：文字风格，类似超链接，无边框和背景。适合跳转页面场景，如查看更多。
  • 文本按钮（text）：文字风格，无边框和背景，悬停时有背景色。适合表格内操作列使用。

    • 以及7种颜色状态与上面配合使用：
    • 主要（primary）：代表主要操作，通常是页面中最重要的操作按钮。提交表单、保存、确认操作等。
    • 次要（secondary）：次于主要操作，表示普通的交互操作。返回、辅助功能，如关闭某个界面而不提交表单。
    • 成功（success）：表示操作成功或积极的结果，通常用于表示“完成”或“通过”。如下载。
    • 信息（info）：传达一般信息，强调中立、不涉及正负结果的提示。如查看信息。
    • 警告（warning）：用于提醒用户某个操作可能存在风险，需要谨慎。
    • 危险（danger）：表示危险操作，通常用于删除、移除等不可逆的操作。
    • 深色（dark）：代表默认或中性的操作，不强调优先级，适用于一般性的交互。

代码演示 ​

按钮类型
按钮有五种类型kind：主按钮、线框按钮、浅色按钮、链接按钮和文本按钮。
查看代码
html
<n-button type="primary">Primary Button</n-button>
<n-button kind="outline" type="primary">Outline Button</n-button>
<n-button kind="light" type="primary">Light Button</n-button>
<n-button kind="link" type="primary">Link Button</n-button>
<n-button kind="text">Text Button</n-button>
加载中状态
添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
查看代码
html
<a-row class="mb-lg">
    <a-space>
        <n-button type="primary" loading>Loading</n-button>
        <n-button type="primary" size="small" loading>Loading</n-button>
    </a-space>
</a-row>
<a-row class="mb-lg">
    <a-space>
        <n-button type="primary" :loading="iconLoading" @click="iconLoading = true">click me！</n-button>
    </a-space>
</a-row>
<a-row class="mb-lg">
    <a-space>
        <n-button type="primary" loading />
        <n-button type="primary" shape="circle" loading />
        <n-button type="danger" shape="round" loading />
    </a-space>
</a-row>
图标按钮
以下为定义好的常用带图标的按钮，只需要加上对应的type属性即可。
当需要在 Button 内嵌入其他 Icon 时，可以设置 icon 属性（驼峰写法如：LockOutlined）。更多图标参考
查看代码
html
<a-row>
    <n-button type="confirm"></n-button>
    <n-button type="add"></n-button>
    <n-button type="edit"></n-button>
    <n-button type="search"></n-button>
    <n-button type="upload"></n-button>
<a-row/>
<a-row>
    <n-button type="copy"></n-button>
    <n-button type="preview"></n-button>
    <n-button type="spread"></n-button>
<a-row/>
<a-row>
    <n-button type="qrcode"></n-button>
    <n-button type="download"></n-button>
    <n-button type="export"></n-button>
<a-row/>
<a-row>
    <n-button type="poster"></n-button>
    <n-button type="reset"></n-button>
    <n-button type="cancel"></n-button>
<a-row/>
<a-row>
    <n-button type="delete"></n-button>
    <n-button type="charts"></n-button>
    <n-button type="review"></n-button>
<a-row/>

<a-row>
    <n-button type="primary" kind="outline" icon="LockOutlined">锁定</n-button>
</a-row>
按钮尺寸
按钮有大、中、小三种尺寸。通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。
查看代码
html
<a-radio-group class="mb-xl" v-model:value="size">
    <a-radio-button value="large">Large</a-radio-button>
    <a-radio-button value="default">Default</a-radio-button>
    <a-radio-button value="small">Small</a-radio-button>
</a-radio-group>
<a-row class="mb-lg">
    <a-space>
        <n-button type="primary" :size="size">Primary</n-button>
        <n-button kind="outline" type="danger" :size="size">Danger</n-button>
        <n-button kind="light" type="primary" :size="size">Outline</n-button>
        <n-button kind="link" type="primary" :size="size">Link</n-button>
        <n-button kind="text" :size="size">Text</n-button>
    </a-space>
</a-row>
<a-row>
    <a-space>
        <n-button type="primary" icon="DownloadOutlined" :size="size"></n-button>
        <n-button type="primary" icon="DownloadOutlined" shape="circle" :size="size"></n-button>
        <n-button type="primary" icon="DownloadOutlined" shape="round" :size="size">Download</n-button>
        <n-button type="primary" icon="DownloadOutlined" shape="round" :size="size"></n-button>
        <n-button type="primary" icon="DownloadOutlined" :size="size">Download</n-button>
    </a-space>
</a-row>
主按钮
查看代码
html
<n-button type="primary">primary</n-button>
<n-button type="secondary">secondary</n-button>
<n-button type="success">success</n-button>
<n-button type="info">info</n-button>
<n-button type="warning">warning</n-button>
<n-button type="danger">danger</n-button>
<n-button type="dark">dark</n-button>
outline按钮
查看代码
html
<n-button type="primary" kind="outline">primary</n-button>
<n-button type="secondary" kind="outline">secondary</n-button>
<n-button type="success" kind="outline">success</n-button>
<n-button type="info" kind="outline">info</n-button>
<n-button type="warning" kind="outline">warning</n-button>
<n-button type="danger" kind="outline">danger</n-button>
<n-button type="dark" kind="outline">dark</n-button>
light按钮
查看代码
html
<n-button type="primary" kind="light">primary</n-button>
<n-button type="secondary" kind="light">secondary</n-button>
<n-button type="success" kind="light">success</n-button>
<n-button type="info" kind="light">info</n-button>
<n-button type="warning" kind="light">warning</n-button>
<n-button type="danger" kind="light">danger</n-button>
<n-button type="dark" kind="light">dark</n-button>
link按钮
查看代码
html
<n-button type="primary" kind="link">primary</n-button>
<n-button type="secondary" kind="link">secondary</n-button>
<n-button type="success" kind="link">success</n-button>
<n-button type="info" kind="link">info</n-button>
<n-button type="warning" kind="link">warning</n-button>
<n-button type="danger" kind="link">danger</n-button>
<n-button type="dark" kind="link">dark</n-button>
text按钮
查看代码
html
<n-button type="primary" kind="text">primary</n-button>
<n-button type="secondary" kind="text">secondary</n-button>
<n-button type="success" kind="text">success</n-button>
<n-button type="info" kind="text">info</n-button>
<n-button type="warning" kind="text">warning</n-button>
<n-button type="danger" kind="text">danger</n-button>
<n-button type="dark" kind="text">dark</n-button>

API ​

通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：kind -> type -> shape -> size -> icon 按钮的属性说明如下：

属性说明类型默认值
kind设置按钮类型default outline light link textdefault
type设置按钮颜色风格primary secondary success info warning danger darkprimary
shape设置按钮形状default round circledefault
size设置按钮大小large middle smallmiddle
icon设置按钮图标string-

事件 ​

事件名称说明回调参数
click点击按钮时的回调(event) => void

支持原生 button 的其他所有属性。

方法 ​


Button ​

名称描述
blur()移除焦点
focus()获取焦点