VUE - vue3 自定义指令

VUE - vue3 自定义指令

    <div v-if="visCardRef" v-click-outside="hideDiv"
        style="border: 1px solid red;background-color: gray;width: 200px;height: 200px;">
    </div>

 

const hideDiv = () => visCardRef.value = false;

// 自定义指令
const vClickOutside = {
    beforeMount(el: any, binding: any) {
        debugger;
        let clickOutsideEvent = (event: any) => {
            debugger;
            // 点击外部时触发
            if (!(el === event.target || el.contains(event.target))) {
                binding.value(); // 调用hideDiv函数
            }
        };
        debugger;
        document.addEventListener('click', clickOutsideEvent);
        el.clickOutsideEvent = clickOutsideEvent;
    },
    unmounted(el: any) {
        debugger;
        document.removeEventListener('click', el.clickOutsideEvent);
    },
};

 

方式2

测试功能，点击div外部，关闭div

创建文件：directives.ts

// 自定义指令
export const clickOutside = {
  beforeMount(el: any, binding: any) {
    debugger;
    let clickOutsideEvent = (event: any) => {
      debugger;
      // 点击外部时触发
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(); // 调用hideDiv函数
      }
    };
    debugger;
    document.addEventListener('click', clickOutsideEvent);
    el.clickOutsideEvent = clickOutsideEvent;
  },
  unmounted(el: any) {
    debugger;
    document.removeEventListener('click', el.clickOutsideEvent);
  },
};

export default {
  clickOutside,
};

 

 

在main.ts中注册

import directives from '@/core/directives';

for (const [name, directive] of Object.entries(directives)) {
  app.directive(name, directive);
}

 

 

在页面中使用

    <div v-if="visCardRef" v-click-outside="hideDiv"
        style="border: 1px solid red;width: 200px;height: 200px;">
    </div>

 

const hideDiv = () => visCardRef.value = false;