多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## 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 | 加载中,请耐心等待 |