vue鼠标移入显示点赞图标,移出隐藏点赞图标,现在我想点击点赞图标,鼠标移出不会隐藏图标,怎么做?

<template>

<div class='cell reply_area reply_item' v-for="(c, i) in comment_list"                         
@mouseover="showLike(i)"  @mouseleave="hideLike(i)">
   <a href='javascript:void(0);' class='reward_reply_btn' reply_id=''>
      <img class="like" :src="c.like" title="点赞" v-show="c.likeOne"
           @click="likePoint(i)"/>{{c.like_count}}
  </a> 

</template>

<script>
export default {
name:’aaa’
data(){

return{
  comment_list:[{
      id:1,
      likeOne: false,    //鼠标移入移出显示隐藏点赞
      likeBox: false,    //点赞数取反
      like_count: '',    //赋值点赞数
    },
    {
      id:2,         
      likeOne: false,    //鼠标移入移出显示隐藏点赞
      likeBox: false,    //点赞数取反
      like_count: '',    //赋值点赞数
    },
    {
      id:3, 
      likeOne: false,    //鼠标移入移出显示隐藏点赞
      likeBox: false,    //点赞数取反
      like_count: '',    //赋值点赞数
    },
  ]   
}

},
methods: {

// 鼠标移入显示点赞
showLike(i){
  this.comment_list[i].likeOne = true;
},
// 鼠标移出隐藏点赞
hideLike(i){
  this.comment_list[i].likeOne = false;
},
// 点赞
likePoint(i){
  if (!this.comment_list[i].likeBox){
    this.comment_list[i].like_count++;    
  }else{ 
    this.comment_list[i].like_count--;   
  }
    this.comment_list[i].likeBox=!this.comment_list[i].likeBox;
},      

},
}
</script>

图片描述

回答:

mouseovermouseleave的时候做下判断是否已经点赞过了
预览:https://codepen.io/anon/pen/a…
满意请采纳!

回答:

设置个全局变量flag=true

  data() {
    return {
      flag: true
    };
  },

移出事件如下

hideLike(i){
 if(this.flag==true){
   this.comment_list[i].likeOne = false;
 }
}

点击事件

likePoint(i){
   this.flag=false
  if (!this.comment_list[i].likeBox){
    this.comment_list[i].like_count++;    
  }else{ 
    this.comment_list[i].like_count--;   
  }
    this.comment_list[i].likeBox=!this.comment_list[i].likeBox;
},  

用flag控制移除事件隐藏事件是否触发,刷新页面falg为默认值true,点赞以后flag为false,所以走不了移除事件。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注