大致需求就是，点击按钮，展示出来一个区域块，点击区域块内，区域块不隐藏，点击区域块以外的地方，就会隐藏

vue2场景下

<template>
  <div>
    <div class="box" @click="showCon = !showCon">
      按钮
    </div>
    <ul class="content" ref="showContent" v-show="showCon">
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
    </ul>
  </div>
</template>

<script>
export default ({
  name: 'App',
  data(){
    return{
      showCon:false,
      showContent:null,
    }
  },
  watch:{
    showCon:{
      handler(newVal, olVal) {
        console.log(olVal);
        if (newVal) {
          setTimeout(() => {
            document.addEventListener('click', this.checkClick);
          }, 0);
        } else {
          document.removeEventListener('click', this.checkClick);
        }
      }
    }
  },
  methods: {
    checkClick(event) {
      let dom = this.$refs.showContent; // 这里是你的下拉菜单元素
      console.log(dom);
      console.log(dom.contains(event.target));
      if (!dom.contains(event.target)) {
        // 不在菜单范围，隐藏即可
        if (this.showCon) {
          this.showCon = false;
          document.removeEventListener('click', this.checkClick);
        }
      }
    }
  },
  unmounted() {
    document.removeEventListener('click', checkClick);
  };
})
</script>

<style lang="scss">
.box{
  width: 100px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  background: lightblue;
  text-align: center;
}
.content{
  width: 200px;
  border: 1px solid #ccc;
}
</style>

vue3环境下

<template>
  <div>
    <div class="box" @click="showCon = !showCon">
      按钮
    </div>
    <ul class="content" ref="showContent" v-show="showCon">
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
    </ul>
  </div>
</template>

<script>

import {
  defineComponent,
  watch,
  ref,
  onUnmounted,
} from 'vue';
export default defineComponent({
  name: 'App',
  setup(){
    const showCon = ref(false);
    const showContent = ref(null);
    const checkClick = (event) => {
      let dom = showContent.value; // 这里是你的下拉菜单元素
      console.log(dom);
      console.log(dom.contains(event.target));
      if (!dom.contains(event.target)) {
        // 不在菜单范围，隐藏即可
        if (showCon.value) {
          showCon.value = false;
          document.removeEventListener('click', checkClick);
        }
      }
    }
    
    watch(
      () => showCon.value,
      (n) => {
        if (n) {
          setTimeout(() => {
            document.addEventListener('click', checkClick);
          }, 0);
        } else {
          document.removeEventListener('click', checkClick);
        }
      },
    );
    onUnmounted(() => {
      document.removeEventListener('click', checkClick);
    });

    return {
      showCon,
      showContent,
    }
  },
})
</script>

<style lang="scss">
.box{
  width: 100px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  background: lightblue;
  text-align: center;
}
.content{
  width: 200px;
  border: 1px solid #ccc;
}
</style>