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

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 
    }
  }
})