vue element-ui loading延迟出现loading效果—elementUI设置loading
Author:zhoulujun Date:
跟着同事使用https://element.eleme.cn/#/en-US/component/loading
element-ui在vue中引入后,就会默认在vue原型链上挂在一个loaiding方法,可以通过vue.prototype.$loading看到。其实就是最外层加载一个带mask 和loading动画的组件。但是,今天却跌入坑中
无论Full screen loading
const loading = this.$loading({ lock: true,// lock可以看作是loading的开关 text: 'Loading', //text则是loading的文本的提示信息 target: 'body', //target则是根据类型显示需要出现loading的区域 spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' //loading的bgcolor })
还是Loading inside a container
v-loading="loading"
都发现,loading出现延迟现象。如果是直接放在页面内控制
<div v-show="downloadPageLoading" class="inner-loading-box"> <div class="el-loading-mask"> <div class="el-loading-spinner"> <svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle> </svg><!----></div> </div> </div>
才发现不会有问题。事件太忙,猜测应该是loading实例化过程中,需要一些列操作,延迟了
转载本站文章《vue element-ui loading延迟出现loading效果—elementUI设置loading》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8150.html
延伸阅读:
- VueRouter和ReactRouter原理:$router与$route区别,见习React Router 4.0
- 数组循环v-model绑定报错You are binding v-model directly to
-
从vue-router报Unknown custom element:
看Vue.use&install - webpack4.x搭建vue工程,各种报错
- vue中methods/watch/computed对比分析,watch及computed原理挖掘
- 前端组件化:vue组件设计思想与遵从原则
- Vue中scoped原理以及带来的样式问题
- vue router warnging:Expected indentation of 10 spaces but found 12
- Slot:HTML5-template与vue-template的区别,Vue中template与slot异同
- vue.directive:vue自定义指令钩子函数——从源码解读
- Vue Router(0):params和query的区别+重定向参数转发+别名作用
- vue项目sass文件找不到css背景图片:weppack报路径出错
- Vue依赖注入:provide/inject
- 详解v-model:v-model双向绑定与Vue自定义组件设置
- vue源码 源码解读
- vue-loader与vue-cli webpack配置笔记:vue-config.js笔记 替换loader
- vue watch对象键值说明,immediate属性详解
- vue mixins混合使用Vue.extend()
- vue router keep-alive 保证回退页面不刷新
- vue、react中key有何区别?循环渲染优化与Vue.delete删除
- vue编译原理(1):vue-loader浅析
- 梳理vue双向绑定的实现原理
- vue2.x入坑总结—回顾对比angularJS/React
- 单向数据流-从共享状态管理:flux/redux/vuex漫谈异步数据处理