Appearance
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)
链接 link
自定义颜色(color 默认值:'',dark 默认值:false)
other
属性
其他属性默认继承 el-button
sybz 主题(theme 默认值:default)
设置 theme="sybz" 使用思云博智配色。theme 可选 default / chenghua / shijingshan / sybz,默认值为 default。品牌蓝 #4876EF,AI 辅助绿 #00D3AB。
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
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 |
ghost | 幽灵按钮,使背景透明 | boolean | false |
iconPlacement | 按钮图标的位置 | 'start' | 'end' | start |
| href | 链接地址,设置后渲染为链接 | string | '' | | target | 链接打开目标 | '_blank' \| '_parent' \| '_self' \| '_top' | _self |
事件
| 事件名 | 说明 |
|---|---|
click | 按钮点击事件,设置 time 后会按防抖逻辑触发 |
插槽
| 插槽名 | 说明 | 参数 |
|---|---|---|
default | 自定义按钮内容 | - |
icon | 自定义按钮左侧图标 | - |
loading | 自定义 loading 图标 | - |