• 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

    延伸阅读: