[JavaScript知识库]自定义图片loading加载效果 vue+antd-design-vue

需求：要求做特定的图片做数据加载后的loading效果
先建loading.vue文件，引入到页面中

import Loading from '../../../components/loading'
  components: { Loading},

在template模板区的最上面

    <transition name="fade">
      <loading v-if="timesSpining"></loading>
    </transition>

data中

 timesSpining: false,

在发请求的方法中

 getListData() {
        this.timesSpining = true
      let params = {
        pageNum: this.current,
        pageSize: this.pageSize
      }
      getGzwList(params)
        .then(res => {
          this.apiDatas = res.rows
        })
        .finally(() => {
          this.timesSpining = false
        })
    },

在创建的loading.vue中

<template>
<div class="loading"></div>
</template>

<script>
export default {
  name: 'Loading' 
}
</script>

<style scoped>
.loading {
  position: fixed;
  left: 60%;
  top: 50%;
  background: url('~@/assets/img/fund/bcg.png')  no-repeat transparent;
  background-size：50%  50%；
  width: 90px;
  height: 34px;
  z-index: 1000;
  animation: loadAnimate 4s linear infinite;

}
@keyframes loadAnimate  {
  0% {
    transform: rotate(0deg);
  }

 100% {
    transform: rotate(360deg);
  }
}
</style>

如果要取消a-table无数据时的暂无数据提示，只要纯图片的loading效果，加上这行代码就行

/deep/ .ant-empty {
  display: none;
}