Button 按钮

使用

常用的操作按钮。

基础用法

本组件库注重业务区分, 所以按钮 api 使用与 el 有些许不同, 首先按钮类型分别为:

• 普通按钮:

  默认状态, 常用用于不会产生数据的操作;

• 主要按钮:

  模块中一般只存在一个, 用于重要操作;

• 次级按钮

  模块中可以有多个, 用户产生数据的操作;

• 文字按钮

  一般用于链接, 或者表格中使用;

• icon按钮

  一般用于节省空间的情景。

disabled

彩色图标

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

方式 1, type

提示

使用text时，按钮文字颜色建议使用color属性指定，而不是type属性。

使用 type, 此 api 参数兼容 el 预设, 如: primary, success, info, warning, danger

方式 2, color

自定义合规字符串, 如:

• 16 进制颜色 : #ff5500
• css 预设颜色: red
• el, type 颜色: primary...

左右图标插槽

方式一, api

方式二, 插槽

不同尺寸(size)

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

API

Button 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

Button Slots

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