vue点击除了某组件本身的其它地方, 隐藏该组件的方法

<template>
<div class="writeZoon">
<div class="top">
<span class="icon iconfont icon-smiling" @click.stop="emojiShow"></span> //1 绑定点击事件
<span class="icon iconfont icon-wenjianjia"></span>
<span class="icon iconfont icon-jiandao"></span>
<span class="icon iconfont icon-xiaoxi"></span>
</div>
<div class="bottom"></div>
<div class="emojiBox" v-show="emoji" >
</div>
</div>
</template>
<script>
export default {
data() {
return {
emoji: false
};
},
methods: {
emojiShow() {
var that = this;
this.emoji = true;
console.log('emoji');
function emojiDisShow(){
//改变数据 重要的是在body上绑定事件, 让数据变成false, 最重要的是阻止点击emoji标签时候禁止冒泡到body上,所以用stop,
that.emoji = false;
document.body.removeEventListener('click',emojiDisShow)//消失后,为了性能,取消body这个事件就可以了
}
document.body.addEventListener('click',emojiDisShow);
}
}
};
</script>