Button 按钮

使用

常用的操作按钮。

基础用法

本组件库注重业务区分, 按钮类型分为:

普通按钮:
默认状态, 常用用于不会产生数据的操作;
主要按钮:
模块中一般只存在一个, 用于重要操作;
次级按钮
模块中可以有多个, 用户产生数据的操作;
文字按钮
一般用于链接, 或者表格中使用;
icon按钮
一般用于节省空间的情景。

disabled

彩色图标

首先明确 普通按钮 不支持染色, 增加颜色的方式有两种:

方式 1, type

使用 type 属性指定按钮类型, 可选值为: primary, success, info, warning, danger

方式 2, color

可通过color属性指定按钮颜色，支持所有格式的合法颜色值, 如:

16 进制颜色 : #ff5500
css 预设颜色: yellowgreen
rgb: rgb(135, 100, 0)
hsl: hsl(178, 70%, 50%)

左右图标插槽

方式一, Props

通过 icon-left 和 icon-right 属性设置左右图标。

方式二, 插槽

不同尺寸(size)

size 提供三个尺寸: sm、base、lg 。

文字按钮阴影

可以通过设置 shadow 属性来设置文字按钮在鼠标悬停时的阴影，阴影的颜色基于按钮的颜色动态计算。

API

Props

参数名	描述	类型	默认值
type	按钮类型	`enum`	`-`
main	是否为主按钮，不能与secondary、text、icon属性同时使用	`boolean`	`false`
secondary	是否为次级按钮，不能与main、text、icon属性同时使用	`boolean`	`false`
text	是否为文本按钮，不能与main、secondary、icon属性同时使用	`boolean`	`false`
icon	是否为图标按钮，不能与main、secondary、text属性同时使用	`boolean`	`false`
size	按钮尺寸	`enum`	`base`
iconLeft	按钮文字左侧图标	`string \| Component`	`-`
iconRight	按钮文字右侧图标	`string \| Component`	`-`
value	按钮展示内容	`string \| number`	`-`
loadingIcon	加载图标	`string`	`-`
loading	是否显示加载中状态	`boolean`	`false`
color	按钮颜色	`string`	`-`
disabled	是否禁用按钮	`boolean`	`false`
shadow	type 为 text 时生效，鼠标悬浮时是否显示阴影	`boolean`	`false`
use-default-style	是否使用默认样式	`boolean`	`true`

Slots

插槽名	描述	参数
default	默认插槽内容	`-`
iconRight	自定义右侧图标组件	`-`
iconLeft	自定义左侧图标组件	`-`
slot-content	自定义按钮内容	`-`

Button 按钮 ​

基础用法 ​

disabled ​

彩色图标 ​

方式 1, type ​

方式 2, color ​

左右图标插槽 ​

方式一, Props ​

方式二, 插槽 ​

不同尺寸(size) ​

文字按钮阴影 ​

API ​

Props ​

Slots ​