Appearance
- default
- chenghua
- shijingshan
- sybz
- gulou
无数据
Appearance
https://element-plus.org/zh-CN/component/button.html
<s-button>按钮</s-button>用示例顶部的选项切换主题,查看同一组按钮在不同主题下的外观。基础写法:<s-button :theme="theme" type="primary">主要按钮</s-button>。
基础写法:<s-button round type="primary">圆角按钮</s-button>。切换 round 可直接比较普通按钮和圆角按钮,也可切换尺寸、禁用及其他按钮形态。
其他属性默认继承 el-button
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
content | tooltip 的提示文字 | string | '' |
time | 防抖时长 | number(毫秒) | 0 |
tooltipAttrs | s-tooltip 组件的属性 | Object 去tooltip组件 | {} |
dangerouslyUseHTMLString | 是否将 content 按 HTML 字符串渲染 | boolean | false |
theme | 主题样式 | 'default' | 'chenghua' | 'shijingshan' | 'sybz' | 'gulou' | default |
variant | 主题样式变体 | '' | 'outline' | 'gradient' | default |
size | 按钮尺寸(高度 32px / 40px / 48px) | 'small' | 'default' | 'large' | default |
round | 是否显示为圆角按钮 | boolean | false |
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 图标 | - |