On this page

button按钮组件

https://element-plus.org/zh-CN/component/button.html

Hidden Title

基础用法：<s-button>按钮</s-button>

属性事件插槽简介

基础用法

成华主题

chenghua主题示例

石景山主题

shijingshan主题示例

Hover 动效（hoverAnimation 默认值：false）

图标按钮

提示文字

防抖

插槽（icon / loading / default）

other

属性

其他属性默认继承 el-button

属性名	说明	类型	默认值
`content`	tooltip 的提示文字	string	`''`
`time`	防抖时长	number(毫秒)	`0`
`tooltipAttrs`	s-tooltip 组件的属性	Object 去tooltip组件	`{}`
`dangerouslyUseHTMLString`	是否将 `content` 按 HTML 字符串渲染	boolean	`false`
`theme`	主题样式	`'default' \| 'chenghua' \| 'shijingshan'`	`default`
`variant`	主题样式变体	`'' \| 'outline' \| 'gradient'`	`default`
`size`	按钮尺寸	`'small' \| 'default' \| 'large'`	`''`
`width`	按钮宽度，支持 `processWidth` 写法	string / number	`''`
`height`	按钮高度，支持 `processWidth` 写法	string / number	`''`
`hoverAnimation`	鼠标移入时上移并轻微放大的动效	boolean	`false`

事件

事件名	说明
`click`	按钮点击事件，设置 `time` 后会按防抖逻辑触发

插槽

插槽名	说明	参数
`default`	自定义按钮内容	-
`icon`	自定义按钮左侧图标	-
`loading`	自定义 loading 图标	-