Vue自定义指令-点击内容框以外的地方，自动隐藏起内容框

最新推荐文章于 2024-07-13 01:06:09 发布

永不满足的求知者

最新推荐文章于 2024-07-13 01:06:09 发布

阅读量800

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41154522/article/details/129098259

版权

Vue 专栏收录该内容

64 篇文章 3 订阅

订阅专栏

在这里插入图片描述

自定义指令

 directives: {
    'click-outside': {
      bind: function (el, binding, vnode) {
        console.log('el',el);
        el.event = function (event) {
          // 检查点击是否发生在节点之内（包括子节点）
          if (!(el == event.target || el.contains(event.target))) {
            // 如果没有，则触发调用
            // 若绑定值为函数，则执行
            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
            if (typeof vnode.context[binding.expression] == 'function') {
              vnode.context[binding.expression](event)
            }
          }
        }
        // 绑定事件
        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
        document.body.addEventListener('click', el.event, true)
      },
      unbind: function (el) {
        // 解绑事件
        document.body.removeEventListener('click', el.event, true)
      },
    },
  },

完整使用

<template>
  <div>
    <!-- 这是基于 bootstrap 常见的下拉菜单样式 -->
    <div class="row" style="margin-left: 20px;">
      <label class="mr5" style="font-size: 14px;">下拉菜单</label>
      <!-- v-click-outside 绑定方法名 -->
      <div class="btn-group" v-click-outside="closeMenu">
        <!-- 这里点击会切换菜单是否可见 -->
        <button
          type="button"
          class="btn btn-default dropdown-toggle"
          @click="isMenuShown = !isMenuShown"
        >
          点击 <span class="caret"></span>
        </button>
        <ul v-show="isMenuShown" class="dropdown-menu" style="display:block;">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isMenuShown: false
      };
    },
    directives: {
	    'click-outside': {
	      bind: function (el, binding, vnode) {
	        console.log('el',el);
	        el.event = function (event) {
	          // 检查点击是否发生在节点之内（包括子节点）
	          if (!(el == event.target || el.contains(event.target))) {
	            // 如果没有，则触发调用
	            // 若绑定值为函数，则执行
	            // 这里我们可以通过钩子函数中的 vnode.context，来获取当前组件的作用域
	            if (typeof vnode.context[binding.expression] == 'function') {
	              vnode.context[binding.expression](event)
	            }
	          }
	        }
	        // 绑定事件
	        // 设置为true，代表在DOM树中，注册了该listener的元素，会先于它下方的任何事件目标，接收到该事件。
	        document.body.addEventListener('click', el.event, true)
	      },
	      unbind: function (el) {
	        // 解绑事件
	        document.body.removeEventListener('click', el.event, true)
	      },
	    },
    },
    methods: {
      // 该方法将菜单是否可见设置为不可见
      closeMenu(ev) {
        console.log({ ev });
        this.isMenuShown = false;
      }
    }
  };
</script>