自定义指令v-loading

发表于 更新于 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import Vue from "vue";
import LoadingComponent from "./loading.vue";
// 使用 Vue.extend构造组件子类
const LoadingContructor = Vue.extend(LoadingComponent);

// 定义一个名为loading的指令
Vue.directive("loading", {
  /**
   * 只调用一次，在指令第一次绑定到元素时调用，可以在这里做一些初始化的设置
   * @param {*} el 指令要绑定的元素
   * @param {*} binding 指令传入的信息，包括 {name:'指令名称', value: '指令绑定的值',arg: '指令参数 v-bind:text 对应 text'}
   */
  bind(el, binding) {
    const instance = new LoadingContructor({
      el: document.createElement("div"),
      data: {}
    });
    el.appendChild(instance.$el);
    el.instance = instance;
    Vue.nextTick(() => {
      el.instance.visible = binding.value;
    });
  },
  /**
   * 所在组件的 VNode 更新时调用
   * @param {*} el
   * @param {*} binding
   */
  update(el, binding) {
    // 通过对比值的变化判断loading是否显示
    if (binding.oldValue !== binding.value) {
      el.instance.visible = binding.value;
    }
  },
  /**
   * 只调用一次，在 指令与元素解绑时调用
   * @param {*} el
   */
  unbind(el) {
    const mask = el.instance.$el;
    if (mask.parentNode) {
      mask.parentNode.removeChild(mask);
    }
    el.instance.$destroy();
    el.instance = undefined;
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <van-loading v-if="visible" />
</template>
<script>
  import { Loading } from "vant";
  export default {
    data() {
      return {
        visible: false
      };
    },
    components: {
      [Loading.name]: Loading
    }
  };
</script>