vue实现点击其他地方简单管用

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/web_xiaolei/article/details/80777222

思路很简单，把页面中的其他点击事件阻止一下冒泡，然后点击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一下阻止冒泡