Vue 一个元素控制另外一个元素的显示和隐藏，同时点击一个元素以外的地方，隐藏另外一个元素

<div @click.stop="basic()" style="width: 100px;height: 100px;background-color: black;">
<!-- 注意，这个需要阻止冒泡@click.stop="basic()" -->
控制元素
</div>

<div  class="person" v-if="sign" style="width: 100px;height: 100px;background-color: red;">
被控制元素
</div>

   data() {
    return {
      sign: true,
    }
  },

 created() {
//添加全局点击事件，注意里面需要使用箭头函数
    if (typeof window !== 'undefined') {
      document.addEventListener('click', (e) => {
        if (e.target.className !== 'person') {
          this.sign = false
        }
      })
    }
  },


  methods: {
    basic() {
      this.sign = !this.sign
    },
}

有两点需要注意的地方：

1.控制元素需要阻止冒泡@click.stop="basic()" 

2.在created添加全局点击事件时，注意里面需要使用箭头函数