Skip to content
On this page

button按钮组件 ​

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

Hidden Title ​

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

属性事件插槽简介 ​

基础用法 ​

主题(theme 默认值:default) ​

用示例顶部的选项切换主题,查看同一组按钮在不同主题下的外观。基础写法:<s-button :theme="theme" type="primary">主要按钮</s-button>。

Hover 动效(hoverAnimation 默认值:false) ​

图标按钮 ​

图标位置(iconPlacement 默认值:start) ​

提示文字 ​

防抖 ​

插槽(icon / loading / default) ​

幽灵按钮(ghost 默认值:false) ​

自定义颜色(color 默认值:'',dark 默认值:false) ​

其他属性(round 默认值:false) ​

基础写法:<s-button round type="primary">圆角按钮</s-button>。切换 round 可直接比较普通按钮和圆角按钮,也可切换尺寸、禁用及其他按钮形态。

属性 ​

其他属性默认继承 el-button

属性名说明类型默认值
contenttooltip 的提示文字string''
time防抖时长number(毫秒)0
tooltipAttrss-tooltip 组件的属性Object 去tooltip组件{}
dangerouslyUseHTMLString是否将 content 按 HTML 字符串渲染booleanfalse
theme主题样式'default' | 'chenghua' | 'shijingshan' | 'sybz' | 'gulou'default
variant主题样式变体'' | 'outline' | 'gradient'default
size按钮尺寸(高度 32px / 40px / 48px)'small' | 'default' | 'large'default
round是否显示为圆角按钮booleanfalse
width按钮宽度,支持 processWidth 写法string / number''
height按钮高度,支持 processWidth 写法string / number''
hoverAnimation鼠标移入时上移并轻微放大的动效booleanfalse
ghost幽灵按钮,使背景透明booleanfalse
iconPlacement按钮图标的位置'start' | 'end'start

| href | 链接地址,设置后渲染为链接 | string | '' | | target | 链接打开目标 | '_blank' \| '_parent' \| '_self' \| '_top' | _self |

事件 ​

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

插槽 ​

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

思云博智私有前端组件库