import loadingVue from './loading.vue';
const Mask = Vue.extend(loadingVue);
Vue.directive('loading', {// 只调用一次 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置bind: function (el, binding, vnode) {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'),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 });}el.instance && el.instance.$destroy();}
});
// 判断 loading 组件挂载的el
const toggleLoading = (el, binding) => {if (binding.value) {Vue.nextTick(() => {// 判断 fullscreen 如果有则绑在 body 上if (binding.modifiers.fullscreen) {insertDom(document.body, el, binding);} else {// 判断是否要绑定在 body 上if (binding.modifiers.body) {insertDom(document.body, el, binding);} else {insertDom(el, el, binding);}}});} else {afterLeave(el.instance, _ => {if (!el.instance.hiding) return;el.domVisible = false;el.instance.hiding = false;}, 300, true);el.instance.visible = false;el.instance.hiding = true;}
};
// 顾名思义 将DOM插入到文档中，并控制源码中 loading.vue 的显示和隐藏
const insertDom = (parent, el, binding) => {// 判断 domVisible 以及 el 中样式是否消失或隐藏if (!el.domVisible && el.style['display'] !== 'none' && el.style['visibility'] !== 'hidden') {Object.keys(el.maskStyle).forEach(property => {el.mask.style[property] = el.maskStyle[property];});el.domVisible = true;parent.appendChild(el.mask);Vue.nextTick(() => {if (el.instance.hiding) {el.instance.$emit('after-leave');} else {el.instance.visible = true;}});el.domInserted = true;} else if (el.domVisible && el.instance.hiding === true) {el.instance.visible = true;el.instance.hiding = false;}
};

const loadingDirective = {};
loadingDirective.install = Vue => {
// 上面的代码
}