element-ui 以服务的方式自定义Loading加载效果
2019-03-04 15:59
5308 查看
1)创建一个loading.js文件
2)引入element-ui的loading组件
import { Loading } from 'element-ui';
3)自定义loading配置项
const loadOption={fullscreen: true ,lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'}
其中:fullscreen:是否全屏,lock:是否需要锁定屏幕的滚动,text:自定义文案,spinner:自定义图标,background:自定义背景色
4)使用LoadingService 创建一个 Loading 实例
let loadingInstance; export default class loadEvents { constructor(vueThis){ this.vm = vueThis ; //vue中的this 也可以不用 } open(){ loadingInstance = Loading.service(loadOption); } close(){ loadingInstance.close(); } }
5)使用
import loadEvents from '../utils/loading' let loads = new loadEvents(); //loads.open();loading效果出现;loads.close();关闭loading效果
6)loading.js完整代码
import { Loading } from 'element-ui'; const loadOption={fullscreen: true ,lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'} let loadingInstance; export default class loadEvents { constructor(vueThis){ this.vm = vueThis ; //vue中的this 也可以不用 } open(){ loadingInstance = Loading.service(loadOption); } close(){ loadingInstance.close(); } }
相关文章推荐
- 三种方式实现自定义圆形页面加载中效果的进度条,包含一个好看的Android UI
- element使用自定义的loading加载效果
- axios+vue+element-ui以服务端方式动态加载loading
- Android 三种方式实现自定义圆形页面加载中效果的进度条
- Android 三种方式实现自定义圆形页面加载中效果的进度条
- Android 三种方式实现自定义圆形页面加载中效果的进度条
- Android 三种方式实现自定义圆形页面加载中效果的进度条
- element ui 加载过度效果
- 【Android自定义View实战】之仿百度加载动画,一种优雅的Loading方式
- Android UI自定义ListView实现下拉刷新和加载更多效果
- Element UI 中可展开表格手风琴效果实现(toggleRowExpansion方法的正确使用方式)
- element-ui 给页面上的DOM元素加loading效果
- 三种方式实现自定义圆形页面加载中效果的进度条
- 自定义加载进度条loading的几种方式
- Android自定义View实现loading动画加载效果
- vue+axios+element ui 实现全局loading加载示例
- 三种方式实现自定义圆形页面加载中效果的进度条
- 三种方式实现自定义圆形页面加载中效果的进度条
- 三种方式实现自定义圆形页面加载中效果的进度条
- 三种方式实现自定义圆形页面加载中效果的进度条