[TOC]
前言
这里以组件的方式创建并使用
loading
需要对
vue
组件开发的流程熟悉 不知道的可以看我的笔记了解—里面的第21条动画使用的图片是在 Build Yourself a Right GIF Spinner / loading.io 网站找的下载并保存到了我的项目静态资源路径下
src -> assets -> img
正文
创建组件
- 新建
.vue
文件:src -> components -> laoding -> index.vue
- 编辑
index.vue
文件 ```
### 使用组件
- 原理:
> 通过自定义一个变量 `isLoading` 初始化为 `true` ,在数据请求成功之后将变量改为 `false` ,在 `template` 中通过变量来控制是否显示隐藏,使用 `vue` 自带的 [过渡效果](https://cn.vuejs.org/v2/guide/transitions.html#%E5%8D%95%E5%85%83%E7%B4%A0-%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E6%B8%A1) 增加用户体验
- 需要在全局的 `css` 中加入过渡需要的样式
.fade-enter, .fade-leave-active { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
- `.vue` 文件使用代码示例片段