Vue组件实现评论区项目中的点赞功能 您所在的位置:网站首页 vue实现评论点赞 Vue组件实现评论区项目中的点赞功能

Vue组件实现评论区项目中的点赞功能

2023-08-08 07:35| 来源: 网络整理| 查看: 265

评论区点赞功能最常见的设计: (1)存在有点赞和踩两个按钮。(2)个人对单个视频只能选择点赞和踩之中的1个,且多次点击同一选项其累加数量只能加1。(3)在选择完成后,其选项图标高亮、选项数量会加1。(4)当尝试全点时会取消先选中的选项,使先选的选项高亮效果和其累加的数量转移至后选的选项。

        在组件的数据区每个评论的数据中需要有dianzanNum、caiNum、feedbackChose三个变量。前两者分别记录点赞和踩的现有数量;feedback默认值为0,且取值还有-1、1,规定0为默认无选中状态,-1为踩,1为点赞。其基本代码如下:

let comItem={ imgSrc:this.imgSrc, nick:this.nick, say:this.say, sayTime:this.sayTime, //以上为其他数据与点赞功能无关 dianzanNum:0, caiNum:0, feedbackChose:0 }

        对于点赞和踩和它们相对应的数据都需要绑定一个class以实现单击后的高亮效果,feedback默认值为0,二者都没有效果。若点赞则将feedback值改为1以满足点赞区块中的class判定要求从而实现绑定效果,若点击踩效果同理。

//点赞图标和数据 ({{item.dianzanNum}}) //踩图标和数据 ({{item.caiNum}})

        点赞和踩设计单击事件,点击其中一个按钮,需要先判定当前的feedbackChose的值。若其值为0,则说明此次单击为第一次选择,则对应数量加1,且修改feedbackChose值为按钮对应值;若其值为另外一个选项所对应的值(1或-1),则说明在该次点击前已经选择了另外一项,则在对应数量加1的基础之上让另外的选项对应的值减1。至此点赞功能实现。其基本代码入下:

methods:{ //点赞事件 dianzan(item){ if(item.feedbackChose===0){ item.dianzanNum++; } if(item.feedbackChose===-1){ item.dianzanNum++; item.caiNum--; } item.feedbackChose=1; }, //踩事件 cai(item){ if(item.feedbackChose===0){ item.caiNum++; } if(item.feedbackChose===1){ item.caiNum++; item.dianzanNum--; } item.feedbackChose=-1; } }

        注意在此部分代码中存有一个问题——同一事件里两个if里都有一句相同的代码,能不能拿出放在if外面?不可以取出,因为这里省略了feedbackChose与选择选项对应值相等的情况,若取出则会使设计(2)失效,从而出现不断点击同一按钮时点赞数量会不断增加。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有