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(未写完，日后更新)

3、原生js的写法

// html <div id="box" style="width:110px;height:110px;background-color:red"></div> //js document.addEventListener('click',(e)=>{
        alert('zhixing')
        var  box = document.getElementById('box');
        if(box.contains(e.target)){
            alert('在内');
        }else{
            alert('在外');        
        }
    })