在Vue项目中自定义全局指令

1、编写监控屏幕大小改变的指令

// 监听屏幕宽度改变
export const resize = {
  // 初始化绑定指令
  inserted (el, binding) {
    // 指令的绑定值，是一个function函数
    const callback = binding.value;
    // 获取屏幕宽高
    const param = { e: null, width: window.innerWidth, height: window.innerHeight };
    // 设置事件
    const listener = (e) => {
      param.e = e;
      param.width = window.innerWidth;
      param.height = window.innerWidth;
      // 回调
      callback(param);
    };
    // 回调
    callback(param);
    // 添加屏幕大小改变的监听事件为，以上事件
    window.addEventListener('resize', listener);
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.onResize = listener;
  },
  // 更新指令
  update() {},
  // 销毁解绑指令
  unbind (el) {
    // 如果元素没有绑定事件则结束
    if (!el.onResize) return;
    // 反之，销毁事件监听
    window.removeEventListener('resize', el.onResize);
    // 并销毁之前定义的私有变量
    delete el.onResize;
  }
};

2、指令目录

3、在main.js中进行全局注册指令

// 注册自定义指令
const directives= require.context(
  './directives',
  true,
  /\.js$/
);

//  注册方法1
Vue.use((Vue) => {
  ((requireContext) => {
    const arr = requireContext.keys().map(requireContext);
    (arr || []).forEach((directive) => {
      directive = directive.__esModule && directive.default ? directive.default : directive;
      Object.keys(directive).forEach((key) => {
        Vue.directive(key, directive[key]);
      });
    });
  })(directives);
});

// 注册方法2
directives.keys().forEach(item => {
  let directive = directives(item);
  directive = directive.default ? directive.default : directive;
  Object.keys(directive).forEach((key) => {
    Vue.directive(key, directive[key]);
  });
});

4、使用
自定义指令的使用方式 ,v-指令=“监听事件”

<div id="app" v-resize="onResize"></div>
onResize (e) {}