一、按需引入

在main.js 中

import { Loading } from 'element-ui';

Vue.use(Loading);    // 使用服务方式的话,只安装Loading即可
Vue.use(Loading.directive);  //  指令方式(v-loading)的话这两行都得有

二、loading的使用

在这里插入图片描述

想要实现上面效果,有以下两种解决办法:

一、指令方式 v-loading

<!-- 轮播 -->
<hy-carousel v-loading="loading" :nofit="curItem.nofit" :imgList= curItem.images />

data () {
  return {
    loading:null,
  }
},
methods:{
  changeTab(item,index) {
    this.loading = true;
    setTimeout(function(){
      self.loading = false;
    },1000)
  }
}

二、服务方式 Loading.service / this.$loading

//写在 li 点击的方法中
changeTab(item,index) {
  const loading = this.$loading({
    target:'.el-carousel',
  l  ock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(255, 255, 255, 0.7)'
  });
  setTimeout(() => {
    loading.close();
  }, 1000);
}


想要详细了解两种区别联系,参见链接文章!

Logo

前往低代码交流专区

更多推荐