Button 按钮
基础通用组件,用于标记一组操作命令,由用户点击触发,响应用户并完成相应的业务逻辑。
代码示例#
API#
预设类型#
ts
type ButtonType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'
type ButtonAttrType = 'button' | 'submit' | 'reset'
#
名称 | 类型 | 说明 | 默认值 | 始于 |
---|---|---|---|---|
badge | number | string | 设置内置徽标内容 | null | 2.0.4 |
block | boolean | 是否为块级元素,设置后宽度变为 100% | false | - |
button-type | ButtonAttrType | 设置原生 <button> 的 type 属性 | 'button' | - |
circle | boolean | 设置是否为圆形按钮 | false | - |
color | string | 设置按钮的主题色 | null | 2.0.0 |
dashed | boolean | 设置是否为虚线边框按钮 | false | 2.0.0 |
disabled | boolean | 设置是否为禁用状态 | false | - |
ghost | boolean | 开启后,按钮将变成背景颜色透明的样式 | false | - |
icon | VueComponent | 按钮的辅助图标,加载状态时会切换为加载图标 | '' | - |
loading | boolean | 设置是否为加载状态 | false | - |
loading-effect | string | 设置加载中图标的效果动画 | false | - |
loading-icon | VueComponent | 设置加载中的图标 | Spinner | - |
no-pulse | boolean | 设置是否禁用点击后的脉冲效果 | false | 2.0.0 |
simple | boolean | 开启后,按钮将变为浅色系的简约风格 | false | - |
size | 'small' | 'default' | 'large' | 按钮的大小 | 'default' | - |
tag | string | 设置按钮的渲染标签 | 'button' | 2.0.0 |
text | boolean | 设置是否为文本按钮 | false | 2.0.0 |
type | ButtonType | 设置按钮类型 | 'default' | - |
#
名称 | 说明 | 参数 | 始于 |
---|---|---|---|
click | 左键点击按钮时触发, 返回点击的事件对象 | (event: MouseEvent) | - |
#
名称 | 说明 | 参数 | 始于 |
---|---|---|---|
default | 按钮的内容插槽 | - | - |
icon | 按钮前置图标的插槽 | - | 2.0.0 |
loading | 加载图标的插槽,需要更多定制化加载图标效果时使用 | - | - |