其他 / Spinner菊花组件
说明
Spinner组件提供了一个使用svg+js的方式事项的菊花图(loading). Spinner组件可以通过传入props来实时控制Spinner的样子, 用来模拟诸如: processing/thinking/waiting/chilling 等特性.
菊花风格
Spinner的风格可以是下面的一种: ios/ios-small/bubbles/circles/crescent/dots, 其中, ios默认的是'ios'; md默认的是'crescent'; wp默认的是'circles'; 这些可以通过config配置
如何使用
// 引入
import {Spinner} from 'vimon'
// 安装
Vue.component(Spinner.name, Spinner)
// 或者
export default{
components: {
Spinner
}
}- 源码:
传入属性 / Props:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
color |
String |
<optional> |
颜色 | |
mode |
String |
<optional> |
'ios'
|
模式 |
name |
String |
<optional> |
菊花样式 | |
duration |
String |
<optional> |
旋转动画的持续时间 | |
paused |
Boolean |
<optional> |
是否暂停 |
用法 / Usages
<Spinner></Spinner>
<Spinner name="ios"></Spinner>
<Spinner mode="wp"></Spinner>
<Spinner color="secondary" name="dots"></Spinner>
<Spinner duration="3000" name="dots"></Spinner>
<Spinner :paused="true" name="ios"></Spinner>