【vue】实现一个loading加载中的自定义指令

功能描述

我们在页面开始渲染等待后台接口数据，或者提交表单数据的时候我们需要一个加载中的效果，我们可以利用vue提供的自定义指令来实现这个功能

实现部分

1. 首先写一个指令

/* eslint-disable no-console */
/*
 * @Author: sunxy
 * @Date: 2021-07-02 23:10:03
 * @LastEditors: sunxy
 * @LastEditTime: 2021-07-03 00:00:09
 * @Description: loading 指令
 * @FilePath: /demo1/src/loading.js
 */

import Vue from 'vue'
// loading 加载效果的组件 自定义编写
import loading from './components/loading'


const loadDirective = {
  //被绑定元素插入父节点时调用 
  inserted(el, binding) {
    const loadingCo = Vue.extend(loading)
    //console.log('loadingCo', loadingCo)
    const loadingComp = new loadingCo().$mount()
    //console.log('loadingComp', loadingComp)
    // 组件实例 挂到el元素上
    el.loadingInstance = loadingComp
    if (binding.value) {
      el.appendChild(loadingComp.$el)
    }
  },
  //所在组件的 VNode 更新时调用
  update(el, binding) {
    //当值改变
    if (binding.value !== binding.oldValue) {
      if (binding.value) { //v-loading true
        el.appendChild(el.loadingInstance.$el)
      } else { //v-loading false 删除节点
        el.removeChild(el.loadingInstance.$el)
      }

    }
  }
}
export default loadDirective

思路就是利用inserted 和 update 两个钩子函数。当组件绑定或者更新这个指令时，通过binding的值来判断状态，然后将loading组件移除或者添加到绑定的节点上。

2. 将指令挂在到全局，当然也可以在组件内

// main.js
import loading from './loading'
Vue.directive('loading', loading)

3.在页面中使用指令

<!-- 设置自定义指令 isLoading为true展示加载效果，false移除加载效果-->
    <div class="list" v-loading="isLoading">

isLoading 可以在加载完数据后设置为false QQ20210703-001827@2x.png