两个 UI 框架中默认的 Button 按钮渲染后都是 <button>元素，所以它们都支持原生 button 的其他所有属性。HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。在 Element Plus 中可以通过 tag 属性来自定义元素的标签。
属性
| Antd | Element | 说明 |
|---|---|---|
| autoInsertSpace | auto-insert-space | 两个中文字符之间自动插入空格 |
| block | — | 将按钮宽度调整为其父宽度的选项 |
| — | bg | 是否显示文字按钮背景颜色 |
| classNames | — | 语义化结构 class |
| — | circle | 是否为圆形按钮 |
| color | color | 设置按钮的颜色 |
| danger | — | 语法糖，设置危险按钮。当设置 color 时会以后者为准 |
| disabled | disabled | 按钮是否为禁用状态 |
| — | dark | dark 模式, 意味着自动设置 color 为 dark 模式的颜色 |
| ghost | — | 幽灵属性，使按钮背景透明 |
| href | — | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 |
| htmlType | native-type | 原生 type 属性 |
| icon | icon | 图标组件 |
| iconPosition | — | 设置按钮图标组件的位置 |
| loading | loading | 是否为加载中状态 |
| — | loading-icon | 自定义加载中状态图标组件 |
| — | link | 是否为链接按钮 |
| — | plain | 是否为朴素按钮 |
| — | round | 是否为圆角按钮 |
| shape | — | 设置按钮形状 |
| size | size | 设置按钮大小 |
| styles | — | 语义化结构 style |
| target | — | 相当于 a 链接的 target 属性，href 存在时生效 |
| — | tag | 自定义元素标签 |
| — | text | 是否为文字按钮 |
| type | type | 按钮类型，在设置color时，后者优先。 |
| variant | — | 设置按钮的变体 |
Ant Design
按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用。Ant Design 的设计理念是把更多的按钮隐藏起来，通过下拉菜单的方式展示。如果多个按钮组合并不是 1 个主操作按钮呢？
Element Plus
以按钮组的方式出现，常用于多项类似操作。使用 <el-button-group> 对多个按钮分组。如果是3个以上的按钮呢？
小结
通过 Button 组件的属性对比，我们发现这两个框架各自有自己的设计理念，作者认为并没有万能的设计模式，还是要根据自己系统的特点来封装高阶组件并附以详细的文档说明，这样才能让系统更方便维护与可扩展。
参考链接：
发表回复