Skip to content
On this page

button按钮组件

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

Hidden Title

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

属性事件插槽简介

基础用法

成华主题

chenghua主题示例

石景山主题

shijingshan主题示例

Hover 动效(hoverAnimation 默认值:false)

图标按钮

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

提示文字

防抖

插槽(icon / loading / default)

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

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

other

属性

其他属性默认继承 el-button

sybz 主题(theme 默认值:default)

设置 theme="sybz" 使用思云博智配色。theme 可选 default / chenghua / shijingshan / sybz,默认值为 default。品牌蓝 #4876EF,AI 辅助绿 #00D3AB

属性名说明类型默认值
contenttooltip 的提示文字string''
time防抖时长number(毫秒)0
tooltipAttrss-tooltip 组件的属性Object 去tooltip组件{}
dangerouslyUseHTMLString是否将 content 按 HTML 字符串渲染booleanfalse
theme主题样式'default' | 'chenghua' | 'shijingshan'default
variant主题样式变体'' | 'outline' | 'gradient'default
size按钮尺寸'small' | 'default' | 'large'''
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 图标-

思云博智私有前端组件库