自定义loading指令

directives/MyLoading/index.vue：

<template>
  <div class="loading-wrapper">
    <div class="loading-content">
      <img width="50" height="50" src="./loading.gif" /> <!-- 需要一个gif图片 -->
      <p class="title">{{ title }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return { title: '正在加载中...' }
  }
}
</script>
<style lang="less" scoped>
.loading-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  .loading-content {
    width: 100%;
    text-align: center;
    .title {
      line-height: 20px;
      font-size: 12px;
      margin: 0;
    }
  }
}
</style>

directives/MyLoading/index.js：

import Vue from 'vue'
import MyLoading from './index.vue'

const myLoading = {
  inserted(el, binding) {
    const Loading = Vue.extend(MyLoading)
    const loading = new Loading().$mount()
    el.instance = loading
    if (binding.value) append(el)
  },
  update(el, binding) {
    if (binding.value !== binding.oldValue)
      binding.value ? append(el) : remove(el)
  }
}
function append(el) {
  el.appendChild(el.instance.$el)
}
function remove(el) {
  el.removeChild(el.instance.$el)
}

export default myLoading

main.js：

import myLoading from '@/directives/MyLoading/index'
Vue.directive('myLoading', myLoading)

使用：（App.vue）

<template>
  <div id="app">
    <ul v-myLoading="!list.length">
      <li v-for="item in list" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return { list: [] }
  },
  async created() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
    this.list = res.data
  }
}
</script>

效果：当接口数据未返回时显示loading，返回结果时关闭loading

 

注意：用length去判断不够准确，因为length可能为0，应该以接收返回code码或其他标识为准