vue自定义指令的使用

对于vue的指令，有我们熟悉的v-model、v-show等，但我们也可以自己定义我们需要的指令，如比较常用的v-lazy懒加载
官方详细文档：https://cn.vuejs.org/v2/guide/custom-directive.html
通过directive就可以在Vue上注册指令

vue2.0
//引入main
如果出现报错使用第二种引入方法
// import directives from "./utils/directives";
import * as directives from "./utils/directives";
Vue.use(directives);

// 注册一个全局自定义指令 `v-focus`使用export default直接导出
export default Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 下拉列表 下拉加载获取分页
export default Vue.directive("loadMore", {
  bind(el, binding, vnode) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector(
      ".el-select-dropdown .el-select-dropdown__wrap"
    );
    SELECTWRAP_DOM.addEventListener("scroll", function() {
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (CONDITION) {
        binding.value();
      }
    });
  },
});

v-loadMore="事件名称"去使用自定义命令

vue3.0
常见的图片懒加载
// 图片懒加载，防抖，节流…
//引入main文件
因为返回的是一个directives 所以在main中遍历处理

import directives from "@/directives";
Object.keys(directives).forEach((key) => {
  app.directive(key, directives[key]);
});

const LazyLoad = {
  mounted(el, binding) {
    let io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        let lazyImage = entry.target;
        if (entry.intersectionRatio > 0) {
          lazyImage.src = binding.value;
          io.unobserve(lazyImage);
        }
      });
    });
    io.observe(el);
  },
};

导出directives对象

const directives = {
  LazyLoad,
};
export default directives;

注：自定义命令也可以用在权限按钮
列：

// 权限判断
function checkArray(key) {
  let arr = ["admin", "edit"];
  let has = arr.includes(key);
  if (has) {
    return true; // 有权限
  } else {
    return false; // 无权限
  }
}


const permission = {
  mounted(el, { value }) {
    let permission = value.action || value; // 获取到 v-permission的值
    let effect = value.effect;
    // 是否禁用
    if (effect == "disabled") {
      el.disabled = true;
      el.classList.add("is-disabled");
    }
    // 是否显示
    if (permission) {
      let hasPermission = checkArray(permission);
      if (!hasPermission) {
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  },
};

或者使用permission.js 插件绑定按钮权限