Button 按钮

介绍

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

按钮类型

通过 type 属性设置按钮类型，支持 default、info、primary、success、warning、danger 六种类型，默认类型为 default。

<vd-button type="default">默认按钮</vd-button>
<vd-button type="info">信息按钮</vd-button>
<vd-button type="primary">主要按钮</vd-button>
<vd-button type="success">成功按钮</vd-button>
<vd-button type="warning">警告按钮</vd-button>
<vd-button type="danger">危险按钮</vd-button>

朴素按钮

通过 plain 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为透明。

<vd-button type="success" plain>成功按钮</vd-button>

禁用状态

通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击。

<vd-button type="success" disabled>成功按钮</vd-button>

加载样式

支持 prefix、suffix、full、mask 四种加载样式，默认为 prefix。

<vd-button type="success" :loading="true" loading-style="prefix">成功按钮</vd-button>

加载类型

加载类型参考 Loading 组件。

<vd-button type="success" :loading="true" loading-type="spinner">成功按钮</vd-button>

加载状态

可以通过 loading 属性维护加载中状态，也可通过 action 属性传入一个 promise 方法，点击后会执行该 promise ，在进入 Fulfilled、Rejected 状态后自动结束加载状态。

<vd-button type="success" :loading="true">成功按钮</vd-button>
<vd-button type="success" :action="handleSubmit">成功按钮</vd-button>
<vd-button type="success" :action="handleSubmit2">成功按钮</vd-button>

import { timeout } from '@vital-design/shared';

async function handleSubmit() {
  await timeout(2000); // 模拟 2000ms 请求
  console.log('提交成功');
}

function handleSubmit2() {
  return new Promise((resolve) => {
    setTimeout(() => { // 模拟 2000ms 请求
      resolve({ code: 1, msg: '提交成功' });
      console.log('提交成功');
    }, 2000);
  });
}

链接按钮

通过 link 属性将按钮设置为链接按钮。

<vd-button type="success" link>链接按钮</vd-button>

块级按钮

通过 block 属性将按钮设置为块级按钮。

<vd-button type="success" block>块级按钮</vd-button>

圆角按钮

通过 round 属性将按钮设置为圆角按钮。

<vd-button type="success" round>圆角按钮</vd-button>

按钮图标

按钮图标参考 Icon 组件。

<vd-button type="success" icon="star">带图标按钮</vd-button>

API

Props

参数	说明	类型	默认值
text	按钮文本	string	-
type	按钮类型	ButtonType	-
form-type	表单类型	ButtonFormType	-
link	是否链接按钮	boolean	false
plain	是否朴素按钮	boolean	false
block	是否块级按钮	boolean	false
round	是否圆角按钮	boolean	false
disabled	是否禁用按钮	boolean	false
loading	是否加载中	boolean	false
loading-type	加载中类型	LoadingType	'spinner'
loading-style	加载中样式	ButtonLoadingStyle	'prefix'
action	按钮操作事件	Function	-
icon	按钮图标	IconsName	-
icon-size	按钮图标大小	number | string	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

TIP

按钮基于 button 组件，更多 props/events 可前往 uniapp 官网 Button 查看。

Slots

名称	说明
default	自定义内容
icon	图标
loading	加载中

类型定义

组件导出以下类型定义：

import type { ButtonType, ButtonLoadingStyle } from 'vital-design';