vue自定义加载指令v-loading占位图指令v-showimg

//main.js文件中
Vue.directive("color", {
  钩子函数
})

<template>
    <div class="combox">
        <div v-for="(item,index) in listArr" :key="index">
            人物{{ item.name }}---- 描述 {{ item.dec}}
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            listArr: {
                type: Array,
                default: () => []
            },
       },
    }
</script>

<template>
    <div class="loadingcssbox">
      <img src="../../assets/loading.gif"/>
    </div>
</template>

import Vue from 'vue'
//引入加载动画组件
import LoadingCom from './LoadingCom.vue'
const loadingDirectiive = {
    inserted(el, bing) { 
      // el ==>表示被绑定了指令的那个元素，这个el是一个原生的js对象。
      // bing ==> 指令相关的信息
      // 得到一个组件的构造函数
      const loadingCtor = Vue.extend(LoadingCom)
      // 得到实例loadingComp
      const loadingComp = new loadingCtor()
      // 获取实例的html
      const htmlLoading = loadingComp.$mount().$el
      // 将html放在el的实例上面去
      el.myHtml = htmlLoading
      if (bing.value) { 
          appendHtml(el)
      }
    },
    update(el, bing) { 
      // bing.value 是v-loading绑定的那个值； true 要显示加载动画
      //新值 bing.value与旧值bing.oldValue是否相等
      if (bing.value !== bing.oldValue ) { 
          bing.value ? appendHtml(el) : removeHtml(el)
      }
    }
}
function appendHtml(el) { 
  el.appendChild(el.myHtml)
}
function removeHtml(el) { 
  el.removeChild(el.myHtml)
}
export default loadingDirectiive

// 得到一个组件的构造函数
const loadingCtor = Vue.extend(LoadingCom)
// 得到实例loadingComp
const loadingComp = new loadingCtor()
// 获取实例的html。将html放在el的实例上面去。
// 放在el实例上的优势是方便访问。
// $el是可以访问加载动画的html。
// 这样就可以将它添加到某一个节点上。同时也方便移除
const htmlLoading = loadingComp.$mount().$el
el.myHtml = htmlLoading 

import loadingDirectiive from './components/loading/loading'
Vue.directive('loading', loadingDirectiive)
<!-- 全局指令的注册方式 -->
Vue.directive("color", {
  钩子函数
})

<template>
  <div class="box">
    <ListCom :listArr="listArr" v-loading="isLoadFlag"></ListCom>
  </div>
</template>
<script>
import ListCom from '../components/ListCom.vue'
export default {
  components: {
    ListCom
  },
  data() {
    return {
      listArr: [],
      //通过isLoadFlag来控制动画是否开启
      isLoadFlag:false,
    }
  },
  created() { 
    this.sendapi()
  },
  methods: {
    sendAPi() { 
      this.isLoadFlag = true;//开启加载动画
      setTimeout(() => { 
        this.listArr = [
          { name: '齐玄帧', dec: '五百年前的吕祖', },
          { name: '王仙芝', dec: '白帝转世' },
          { name: '李淳罡', dec: '李淳罡当初的实力是绝对的天下第一的' },
          { name: '邓太阿', dec: '徐凤年的舅舅' },
          { name: '曹长卿', dec: '这位号称独占天象八斗风流，实力排进天下前三' }
        ]
        //移除加载动画
        this.isLoadFlag = false
      },3000)
    }
  }
}
</script>

<template>
    <div class="showimgbox">
        <img src="../../assets/nodata.png"/>
        <p>暂无数据</p>
    </div>
</template>

import Vue from 'vue'
import ShowImgCom from './ShowImgCom.vue'
const showimgDirectiive = {
  inserted(el, bing) {
    const showimgCtor = Vue.extend(ShowImgCom)
    const showImgComp = new showimgCtor()
    const htmlSHowPic = showImgComp.$mount().$el
    el.myHtml = htmlSHowPic
    if (bing.value) {
        appendHtml(el)
    }
  },
  update(el, bing) {
    if (bing.value !== bing.oldValue) {
      bing.value ? appendHtml(el) : removeHtml(el)
    }
  }
}
function appendHtml(el) {
  el.appendChild(el.myHtml)
}
function removeHtml(el) {
  el.removeChild(el.myHtml)
}
export default showimgDirectiive

import showimgDirectiive from './components/ShowImg/showimg'
Vue.directive('showimg', showimgDirectiive)

<template>
  <div class="box" v-showimg="showImgFlag">
    <ListCom :listArr="listArr" v-loading="isLoadFlag"></ListCom>
  </div>
</template>
<script>
import ListCom from '../components/ListCom.vue'
export default {
  components: {
    ListCom
  },
  data() {
    return {
      listArr: [],
      isLoadFlag: false,
      showImgFlag:false
    }
  },
  created() { 
    this.sendAPi()
  },
  methods: {
    sendAPi() { 
      this.isLoadFlag = true;//加载中
      setTimeout(() => { 
        this.listArr = []
        this.isLoadFlag = false 
        //是否显示占位图
        if (this.listArr && this.listArr.length === 0) {
          this.showImgFlag = true
        } else { 
          this.showImgFlag =false
        }
      },3000)
    }
  }
}
</script>