visionwu-vue-cascader/src/directives/clickOutset.ts

学习vue3并使用vue-cli开发的级联组件

import { DirectiveBinding } from 'vue';
/**
 * 这是一个click-outset的指令
 */

const listener = (e: MouseEvent, el: HTMLElement, binding: DirectiveBinding) => {
  if (e.target === el || el.contains(e.target as Node)) {
    return;
  }
  binding.value();
};

export default {
  // 元素插入到父元素中 --> 通组件的mounted生命周期函数
  mounted(el: HTMLElement, binding: DirectiveBinding): void {
    document.addEventListener('click', (e) => listener(e, el, binding));
  },
  // 指令卸载时触发 --> 同组件的unmounted生命周期函数
  unmounted(el: HTMLElement, binding: DirectiveBinding): void {
    document.addEventListener('click', (e) => listener(e, el, binding));
  },
};