vue element-ui loading延迟出现loading效果—elementUI设置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