## Spin 局部加载
当区块正在获取数据中时可使用,适当的等待动画可以提升用户体验。
需要父级有`position`样式:`relative`/`absolute`
![](https://img.kancloud.cn/4b/f8/4bf8e8f8689f6ff2dfcbda455dc0e4d9_1909x497.png)
### 代码示例
默认风格
> 设置`theme`属性为`default`,默认为`default`,可不设置。
![](https://img.kancloud.cn/4b/f8/4bf8e8f8689f6ff2dfcbda455dc0e4d9_1909x497.png)
```html
<cvu-spin theme="default"></cvu-spin>
```
方块旋转风格
> 设置`theme`属性为`box`
![](https://img.kancloud.cn/e8/51/e8513cec0378e3daaca65cfdc8baf7fd_1908x494.png)
```html
<cvu-spin theme="box"></cvu-spin>
```
icon图标旋转风格
> 设置`theme`属性为`icon`,`icon`属性设置为iview-icon图标type值,默认为`ios-loading`。
![](https://img.kancloud.cn/27/21/272148f87d3a5e020b3d4cbf9c212f52_1916x492.png)
```html
<cvu-spin theme="icon" icon="ios-loading"></cvu-spin>
```
整页加载
使用内置的`$cvuSpin`方法可以全局加载。
通过直接调用以下方法来使用组件:
* `this.$cvuSpin.show()`
* `this.$cvuSpin.hide()`
* `this.$cvuSpin.config(options)`
* `this.$cvuSpin.destroy()`
以上方法隐式的创建及维护Vue组件。函数及参数说明如下:
| 函数名 | 说明 | 参数 |
| --- | --- | --- |
| show| 显示 | 无 |
| hide | 隐藏 | 无 |
| config | 全局配置 | options |
| destroy | 全局销毁 | 无 |
### props
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| theme | 主题风格,可选值为default / box / icon | String | default |
| icon | icon图标type值 | String | ios-loading |
| background | 背景色 | String | rgba(255, 255, 255, .6) |
| color | 文字 / 加载元素颜色 | String | #0382D9 |
| z-index | 层级 | Number | 9999 |
| content | 提示文字 | String | 加载中,请耐心等待 |
- 介绍
- 安装
- 快速上手
- 组件
- 基础
- Button 按钮
- ButtonGroup 按钮组
- 布局
- Card 卡片
- Col 列
- Collapse 折叠面板
- Divider 分割线
- Empty 空数据
- Row 行
- 导航
- Paginator 分页
- PaginatorMini 分页
- Tab 标签页
- 表单
- Cascader 级联选择
- PasswordStrength 密码强度
- Print 局部打印
- Table 表格
- Upload 文件上传
- 视图
- Calendar 日历
- Drawer 抽屉
- Loading 加载
- Message 全局提示
- Modal 对话框
- Notification 通知菜单
- Poptip 气泡提示
- Preview 图片预览
- PreviewPdf pdf文件预览
- Tooltip 文字提示
- Tree 树形控件
- 方法
- Copy 复制到剪贴板
- DescNotice 桌面消息通知
- Html2Pdf 导出pdf
- Storage 定时存储
- 其他
- BackTop 返回顶部
- NumberScroll 数字动画
- NumberZero 数字前补零
- Spin 局部加载
- Tcplayer 播放器