vue實作點選其他地方簡單管用

思路很簡單，把頁面中的其他點選事件阻止一下冒泡，然後點選body的時候正常做你想做的操作就行，超簡單

js：

data: function(){
   return {
        show:false
    }
},
mounted () {
    document.addEventListener('click', this.handleBodyClick)
},
destroyed () {
    document.removeEventListener('click', this.handleBodyClick)
},
methods:{
    handleBodyClick: function(){
        if (this.show) {
            this.show = false;
        }
    }
    toggleShow: function(){
        this.show = !this.show
    }
}
           

html：

<div :class="{'show':show}" @click.stop="toggleShow()">
、、、
</div>
           

千萬記住區域以内的别的click事件都stop一下阻止冒泡