vue3中仿模态框点击空白处隐藏某个div

Lucky_girl_wan

已于 2022-02-09 15:27:31 修改

阅读量1.4k

点赞数

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

于 2022-01-26 15:16:29 首次发布

本文链接：https://blog.csdn.net/Lucky_girl_wan/article/details/122702516

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

记录

23 篇文章 0 订阅

订阅专栏

1. vue3中建立div结构如下：

<div ref="codeDom">
   <ul v-show="isShow">
      <li>测试</li>
   </ul>
</div>

2. 在ts中写入处理方法如下：

import { defineComponent, ref, onMounted, onUnmounted } from 'vue'

export default defineComponent({
  setup() {
    const codeDom= ref()
    const isShow = ref(true)

    const closeSelect = (e: Event) => {
      if (codeDom.value && !codeDom.value.contains(e.target)) {
       isShow.value = false
      }
    }

    onMounted(() => {
       document.addEventListener('click', closeSelect)
    })
    onUnmounted(() => {
       document.removeEventListener('click', closeSelect)
    })

    return {
        codeDom,
        isShow 
    }
  }
})