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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值