press-next/mixin/click-outside/index.ts

Vue3 组件库，支持 Composition API

export const ClickOutsideMixin = (config: {
  event: string;
  method: string;
  selector?: string;
}) => ({
  data(this: any) {
    const clickOutsideHandler = (event: { target: any }) => {
      const ele: HTMLElement = config.selector ? document.querySelector(config.selector) : this.$el;
      if (ele && !ele.contains(event.target)) {
        this[config.method]?.();
      }
    };

    return { clickOutsideHandler };
  },

  mounted(this: any) {
    document.addEventListener(config.event, this.clickOutsideHandler);
  },

  beforeDestroy(this: any) {
    document.removeEventListener(config.event, this.clickOutsideHandler);
  },
});

export const clickOutsideMixin = ClickOutsideMixin;