仿掘金官网 - 点赞效果 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第5天

简单记录一下实现点赞功能的过程
Vue技术栈
之前想实现动画效果基本是靠写js来实现。
需求（简单考虑，eg.未考虑联网及上传数据）

• 查看数量部分不变（不考虑点进去查看返回的情况）
• 点赞及评论鼠标经过会变为蓝色#007fff【icon + 数字】
• 点赞之后点赞的icon会变为全蓝色，点赞数据 + 1
• 再次点击点赞按钮，点赞部分恢复初始状态
• 评论只有鼠标经过效果；点击会跳转到响应博客的评论区，这里暂时没有实现

最终思路

• 第一步肯定是要准备需要的素材 => 样式变换需要的几个icon
• 前边js课学过各司其职这个词， 那就通过js改变样式的类名来实现样式的修改

<template>部分的代码

views, comments是通过props传递过来的属性；likesCopy是props传递过来属性的副本，因为子组件不能直接修改父组件传递过来的props属性。

<ul class="action-list jh-timelin-action-area">
    <li class="item view"><i></i><span>{{views}}</span></li>
    <li class="item like"><i></i><span>{{likesCopy}}</span></li>
    <li class="item comment"><i></i><span>{{comments}}</span></li>
</ul>

第一版思路：通过给'item like'类绑定mouseover, mouseleave事件鼠标经过时的实现图片、数字、颜色的切换，但是在写鼠标click事件的时候，鼠标移开点赞效果得不到保留！！！
当前思路 - 运用less的嵌套实现不同的类，不通鼠标事件修改为不同的类名

• 如果安装less不成功，记得看下版本是否是less的版本太高，不能与vue的版本相匹配
  
• Vue模板的style默认使用css，需要标注使用的语言为less<style lang="less">...</style>
  

无鼠标事件，也没有点击点赞按钮状态下的样式

设置文字的颜色，及点赞图标的地址（这里直接使用了相对路径，没有给src配置别名）

<style lang="less">
.like {
    i {
        background-image: url('../../assets/images/like.png');
    }
    span {
        color: #4e5969;
    }
}
</style>

鼠标经过效果时

.like:hover {
    i{
        background-image: url('../../assets/images/toLike.png');
    }
    span {
        color: #007fff;
    }
}

鼠标点击点赞按钮后的效果

.liked {
    i {
        background-image: url('../../assets/images/liked.png');
    }
    span {
        color: #007fff;
    }
}

与js配合完成需求

<template>
    <ul class="action-list jh-timelin-action-area">
        <li class="item view"><i></i><span>{{views}}</span></li>
        <li class="item like" ref="likeBlog" @mouseup="likeTheBlog"><i></i><span>{{likesCopy}}</span></li>
        <li class="item comment"><i></i><span>{{comments}}</span></li>
    </ul>
</template>

<script>
export default {
    props: {
        views: Number,
        likes: Number,
        comments: Number,
    },
    data() {
        return {
            isLike: false,
            likesCopy: this.likes,
        }
    },
    methods: {
        likeTheBlog(){
            const current = this.$refs.likeBlog;
            if (!this.isLike) {
                current.classList = 'item liked';
                this.isLike = true;
                this.likesCopy++;
                // 这块还需要数值 +1
                // 通知服务器更新数据
            }
            else {
                current.classList = 'item like';
                this.isLike = false;
                this.likesCopy--;
                 // 这块还需要数值 -1
                 // 通知服务器更新数据
            }
        },
    }
};
</script>

<style lang="less">
.view {
    i {
        background-image: url('../../assets/images/view.png');
    }
    span {
        color: #4e5969;
    }
}
.like {
    i {
        background-image: url('../../assets/images/like.png');
    }
    span {
        color: #4e5969;
    }
}
.like:hover {
    i{
        background-image: url('../../assets/images/toLike.png');
    }
    span {
        color: #007fff;
    }
}
.liked {
    i {
        background-image: url('../../assets/images/liked.png');
    }
    span {
        color: #007fff;
    }
}
.comment {
    i {
        background-image: url('../../assets/images/comment.png');
    }
    span {
        color: #4e5969;
    }
}
.comment:hover {
    i{
        background-image: url('../../assets/images/toComment.png');
    }
    span {
        color: #007fff;
    }
}
</style>

写到这里，点赞的页面效果基本是实现了，但是突然有了一个新的思考，重复的样式代码怎样优化！！！