木灵鱼儿

木灵鱼儿

阅读:95

最后更新:2022/09/16/ 20:08:27

实现一个点击空白区域关闭显示的自定义指令

typescript

import type { DirectiveBinding } from "vue";

export default {
  bind(el: HTMLElement, binding: DirectiveBinding<Function>) {
    //声明一个给document绑定的事件
    function documentClick(event: Event) {
      const target = event.target as unknown as Node;
      if (el.contains(target)) {
        return false;
      }
      //如果绑定了关闭函数就触发
      if (binding.expression) {
        binding.value(event);
      }
    }
    // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
    el["__clickBlankSpaceClose__"] = documentClick;
    document.addEventListener("click", documentClick);
  },
  unbind(el: HTMLElement) {
    // 解除事件监听
    document.removeEventListener("click", el["__clickBlankSpaceClose__"]);
    Reflect.deleteProperty(el, "__clickBlankSpaceClose__");
  },
};

使用

import Vue from "vue";

import clickBlankSpaceClose from "./components/clickBlankSpaceClose";
Vue.directive("clickBlankSpaceClose", clickBlankSpaceClose);
<template>
 <div class="menu-wrap" v-clickBlankSpaceClose="onCloseList">
   ...
 </div>
</template>

onCloseList为具体的关闭的方法,比如控制一个变量的true和false

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 22
文章被阅读 95

相关文章

目录树