LoadingIcon 加载动画
此组件为一个小动画，loadMore加载更多等组件的正在加载状态场景。
平台差异说明
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| √ | × | √ | √ |
基本使用
通过mode设定动画的类型
<m-loading-icon size="10"></m-loading-icon>
动画文字
text可以指定文字内容textSize可以指定文字大小
<m-loading-icon size="10" text="加载中" textSize="14"></m-loading-icon>
模式类型
mode可以指定模式
<m-loading-icon vertical text="spinner" mode="spinner" textSize="14"></m-loading-icon>
<m-loading-icon vertical text="semicircle" mode="semicircle" textSize="14"></m-loading-icon>
<m-loading-icon vertical text="circle" mode="circle" textSize="14"></m-loading-icon>
<m-loading-icon vertical text="bicircle" size="14" mode="bicircle" textSize="14"></m-loading-icon>
排列类型
vertical可以指定文字和图标是否垂直排列
<m-loading-icon vertical size="10" text="加载中" textSize="14"></m-loading-icon>
动画模式
timing-function可以指定mode为semicircle或circle时动画里css中animation-timing-function的属性，默认为ease-in-out
<m-loading-icon mode="circle" timing-function="linear"></m-loading-icon>
动画运行时间
duration可以指定动画的运行周期时间
<m-loading-icon size="10" duration="500"></m-loading-icon>
图标颜色
color可以指定动画活动区域的颜色, inactive-color可以制定mode为circle或bicircle时的暗边颜色
<m-loading-icon size="10" color="red"></m-loading-icon>
<m-loading-icon mode="circle" color="red" inactive-color="yellow"></m-loading-icon>
<m-loading-icon size="14" mode="bicircle" color="red" inactive-color="yellow"></m-loading-icon>
图标尺寸
通过size设定尺寸，单位px
<m-loading-icon size="20"></m-loading-icon>
显示或隐藏动画
通过show设置为true或false，来显示或隐藏动画
<m-loading-icon size="10" :show="false"></m-loading-icon>
API
Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| show | 是否显示动画 | Boolean | true | false |
| color | 图标颜色 | String | color['m-info'] | - |
| textColor | 提示文本颜色 | String | color['m-info'] | - |
| inactiveColor | 图标的暗边颜色, mode为circle或者bicircle模式有效 | String | - | - |
| vertical | 图标和文字是否垂直排列 | Boolean | false | true |
| mode | 模式选择 | String | default | spinner | semicircle | circle | bicircle |
| size | 加载图标的大小，单位px | String | Number | 24 | - |
| textSize | 加载文字的大小，单位px | String | Number | 15 | - |
| text | 文字内容 | String | - | - |
| timingFunction | mode为semicircle或circle | String | ease-in-out | - |
| duration | 动画执行周期时间，单位ms | String | Number | 1200 | - |