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

点击emoji表情标签, 出现标签组件,点击其它地方, 改组件消失的效果;

<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>

转载于:https://www.cnblogs.com/dangdanghepingping/p/11393316.html