vue3 实现点击元素外的区域隐藏该元素,但点击该元素的绝对定位的子元素不隐藏?

  • Z时代
  • 2024-03-05
  • 分类：IT

比如这种点击红色框以外的区域
vue3 实现点击元素外的区域隐藏该元素,但点击该元素的绝对定位的子元素不隐藏?

回答：

把事件委托给 document，点击的时候判断是否点到目标元素，没点到就算 clickOutside

/**
 * @function clickOutSideRef - 用于初始化 clickOutSide 点击事件
 * @param {Function} clickOutsideCallback - 点击到区域外时的回调函数
 */
const clickOutSideRef = (clickOutsideCallback) => {
  const ref = ref(null);
  const clickHandler = (event) => {
    const { target } = event;
    // 判断是否点在外面
    if(!target.contains(ref.value)){
      clickOutsideCallback(event);
    }
  }
  onMounted(() => {
    if(!ref) return;
    document.addEventListener("click", clickHandler);
  });
  onBeforeUnount(() => {
    document.removeEventListener("click", clickHandler);
  });
  return ref;
}

使用方法与 vue.ref 类似，但是需要传入 clickOutSide回调函数：

<script setup>
  const ref = clickOutSideRef(() => {
    alert('点到外面了');
  });
</script>
<template>
  <div ref="ref">点点试试</div>
</template>

我对 Vue3 并不熟悉，以上代码未经测试，仅提供一种思路。

回答：

<template>
  <div>
    <button @click="showElement">显示/隐藏</button>
    <div ref="target" v-show="visible" @click="handleClick">
      <!-- 子元素 -->
      <div ref="child" class="child" style="position: absolute;">我是不会隐藏的</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    showElement() {
      this.visible = !this.visible
    },
    handleClick(event) {
      const target = this.$refs.target
      const child = this.$refs.child
      if (target && target.contains(event.target)) {
        // 点击了目标元素或其子元素，不处理
        if (child && child.contains(event.target)) {
          // 点击了子元素，不隐藏目标元素
        } else {
          // 没有点击子元素，隐藏目标元素
          this.visible = false
        }
      } else {
        // 点击了目标元素外的区域，隐藏目标元素
        this.visible = false
      }
    },
  },
}
</script>

以上是 vue3 实现点击元素外的区域隐藏该元素,但点击该元素的绝对定位的子元素不隐藏? 的全部内容， 来源链接： utcz.com/p/934102.html

回到顶部