vue中如何实现点击除了自己元素之外都将自身元素隐藏的功能

1、vue的写法1

//html

<div id="box" ref="box" style="width:110px;height:110px;background-color:red"></div>

//JS

created(){ document.addEventListener('click',(e)=>{
        console.log(this.$refs.box.contains(e.target));
        if(!this.$refs.box.contains(e.target)){
            this.isShowDialog = false;
        }
    })
}

2、vue的写法2

 // 检查一个鼠标事件是否发生在元素内部（含border，不含box-shadow等）

HTML:

<li v-for="(twonav,indextwo) in nav.child.contentItems" :key="indextwo">

<button :style='{background:twonav.color}' @click.stop="showThree(twonav,twonav.contentItemId)" @mouseover.stop="showTwodDescription(twonav,twonav.contentItemId)" @mouseout.stop ="hideOneDes