xm-components-libButton 文档 #
安装 #
javascript
import { createApp } from 'vue';
import { IButton } from 'xm-components';
const app = createApp();
app.use(IButton);
常用按钮 #
Button组件的基本使用
禁用状态 #
按钮不可操作的状态
文本按钮 #
没有边框与背景颜色的按钮。
图标按钮 #
拥有图标的按钮
不同大小 #
除了默认的大小，按钮组件还提供了3种额外的尺寸可供选择。
自定义颜色按钮 #
可以自定义颜色的按钮类型
加载中按钮 #
点击按钮来加载数据，并向用户反馈加载状态。
通过设置 loading 属性为 true 来显示加载中状态。
按钮组 #
以按钮组的方式出现，常用于多项类似操作。
按钮属性 #
| 属性 | 说明 | 类型 | 接收值 | 默认值 |
|---|---|---|---|---|
| size | 按钮尺寸 | string | large | default | small | mini | default |
| type | 按钮类型 | string | primary | success | warning | danger | info | text | — |
| plain | 是否是朴素按钮 | boolean | — | false |
| round | 是否是圆角按钮 | boolean | — | false |
| disabled | 是否禁用该按钮 | boolean | — | false |
| iconPosition | 图标位置 | string | left | right | left |
| circle | 是否为圆形 | boolean | — | false |
| textColor | 改变字体颜色 | string | <CSSProperties, 'color'> | — |
| loading | 加载中按钮 | boolean | — | false |
| nativeType | 设置原生button的属性, 防止与Form提交冲突 | String | 'butoon' | 'submit' | 'reset' | 'butoon' |