• Home
  • home > webfront > ECMAS > vue >

    vue element-ui loading延迟出现loading效果—elementUI设置loading

    Author：zhoulujun Date：

    vue组件库element-ui，loading组件延迟出现，页面已经渲染出来了，loading满半拍弹出loading弹窗。一直以为是其它问题，调了半天，还是直接写的解决。有时间再看下怎么改进

    跟着同事使用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

    收藏
    上一篇：再谈from属性EncType与axios封装—axios拦截与中断—源码浅析
    下一篇：vue源码原理学习笔记—响应式之依赖收集与订阅发布更新
    延伸阅读：