Vue自定义指令 之 elementUI中v-loading的源码分析

Vue自定义指令基础

使用教程。

https://cn.vuejs.org/v2/guide/custom-directive.html#ad

钩子函数&&钩子函数参数

el：操作DOM，
binding：在元素上get你想读取的值，

自定义指令使用实例：

elementUIAPI文档中给出的使用教程：
https://element.eleme.cn/2.6/#/zh-CN/component/loading

elementUI中源码

  Vue.directive('loading', {
    bind: function(el, binding, vnode) {
      // el :绑定 v-loading 的元素节点
      const textExr = el.getAttribute('element-loading-text');
      const spinnerExr = el.getAttribute('element-loading-spinner');
      const backgroundExr = el.getAttribute('element-loading-background');
      const customClassExr = el.getAttribute('element-loading-custom-class');
      const vm = vnode.context;
      const mask = new Mask({
        el: document.createElement('div'), // 在loding.vue中添加元素div节点
        data: {
          text: vm && vm[textExr] || textExr,
          spinner: vm && vm[spinnerExr] || spinnerExr,
          background: vm && vm[backgroundExr] || backgroundExr,
          customClass: vm && vm[customClassExr] || customClassExr,
          fullscreen: !!binding.modifiers.fullscreen // 获取调用者在组件中的
        }
      });
      el.instance = mask;
      el.mask = mask.$el;
      el.maskStyle = {};

      binding.value && toggleLoading(el, binding);
    },

    update: function(el, binding) {
      el.instance.setText(el.getAttribute('element-loading-text'));
      if (binding.oldValue !== binding.value) {
        toggleLoading(el, binding);
      }
    },

    unbind: function(el, binding) {
      if (el.domInserted) {
        el.mask &&
        el.mask.parentNode &&
        el.mask.parentNode.removeChild(el.mask);
        toggleLoading(el, { value: false, modifiers: binding.modifiers });
      }
    }
  });