常用directive，防止重复点击，点击盒子外部触发的事件，不换行省略号 ，移上去显示详情

import Vue from "vue";
import store from "../../store";
import { debounce } from "throttle-debounce";
Vue.directive("demo", {
  bind: function(el, binding, vnode) {
    console.log("bind");
    var s = JSON.stringify;
    el.innerHTML =
      "name: " +
      s(binding.name) +
      "<br>" +
      "value: " +
      s(binding.value) +
      "<br>" +
      "expression: " +
      s(binding.expression) +
      "<br>" +
      "argument: " +
      s(binding.arg) +
      "<br>" +
      "modifiers: " +
      s(binding.modifiers) +
      "<br>" +
      "vnode keys: " +
      Object.keys(vnode).join(", ");
  }
});
// 可以让他的父级盒子  子级盒子  或者自身滚回原处  并且可以传入一个数值 设置他的高度 当父子同时设置的时候 以父盒子为准
Vue.directive("scroll", {
  componentUpdated: function(el, binding) {
    Vue.nextTick().then(() => {
      let div = "";
      if (binding.modifiers.children) {
        div = el.children;
      }
      if (binding.modifiers.parent) {
        div = el.parentElement;
      }
      if (!binding.modifiers.parent && !binding.modifiers.children) {
        div = el;
      }
      div.scrollTop = "0";
      if (!isNaN(binding.value)) {
        div.style.maxHeight = binding.value + "px";
      }
      div.style.overflow = "auto";
      if (binding.modifiers.y) {
        div.style.overflowY = "hidden";
      } else {
        div.style.overflowX = "hidden";
      }
    });
  }
});
Vue.directive("clickoutside", {
  // 点击盒子外部触发的事件
  bind(el, binding, vnode) {
    let documenHandler = function(e) {
      if (el.contains(e.target)) {
        return false;
      }
      if (binding.expression) {
        // console.dir(binding.expression);
        binding.value(e);
      }
    };
    el._vueClickOutside_ = documenHandler;
    document.addEventListener("click", documenHandler);
  },
  unbind(el, binding) {
    document.removeEventListener("click", el._vueClickOutside_);
    delete el._vueClickOutside_;
  }
});
Vue.directive("showTitle", {
  // 不换行省略号  移上去显示详情
  bind: function(el, binding) {
    Vue.nextTick().then(() => {
      el.title = el.innerText;
      el.style.whiteSpace = "nowrap";
      el.style.overflow = "hidden";
      el.style.textOverflow = "ellipsis";
    });
  },
  update: function(el, binding) {
    Vue.nextTick().then(() => {
      el.title = el.innerText;
      el.style.whiteSpace = "nowrap";
      el.style.overflow = "hidden";
      el.style.textOverflow = "ellipsis";
    });
  }
});
Vue.directive("placeholder", {
  //占位符
  bind: function(el, binding) {
    Vue.nextTick().then(() => {
      if (el.innerText === "") {
        el.innerText = "--";
      }
    });
  }
});
Vue.directive("auth", {
  // 控制增删改查功能
  bind: function(el, binding) {
    Vue.nextTick(() => {
      if (!store.getters.auth.includes(String(binding.value))) {
        el.parentNode.removeChild(el);
        // el.parentNode.innerHTML = `<div style="display: none">auth${btoa(binding.value)}<div>`;
        // el.parentNode.innerHTML = `<div>auth${binding.value}<div>`;
        // el.parentNode.style = "display: none";
      }
    });
  }
});
// 防止重复点击
Vue.directive("preventClick", {
  inserted: function(el, binding) {
    el.addEventListener("click", () => {
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
        }, 1000);
      }
    });
  }
});
export default Vue;