末尾有解释如何使用完整组件，粘贴复制即可用思路： 1.进入页面，父组件将数据传递给子组件，数据包含：图标样式、字体图标是否高亮状态、请求地址、发送请求时需要的数据。 2点击字体图标，动画+1或者-1效果出现，同时给后台发送请求，保存点赞状态。代码如下
<template>
<div class="isZan-container">
<span @click="addLike()" :class="{'isLike':likeClass}" class="container-inner">
<transition @before-enter="beforeEnter" @enter="enter"
@after-enter="afterEnter">
<span class="addOne" v-if="isLike">+1</span>
<span class="cancleOne" v-if="like">-1</span>
</transition>
<i :class="[icon,{'isLike':likeClass}]"></i>
{{getLikeClass.title }}:{{getLikeClass.technicalListDetail.t_zan}}
</span>
</div>
</template>
<script>
import qs from 'qs';
export default {
name: "isLike",
data() {
return {
isLike: false, // 点赞+1
like: false, // 点赞-1
likeClass: "", //点赞后样式改变
commentLike_id: "",//请求数据时点赞Id
postLike: "",
cancleLike: "",
icon: '',
}
},
props: ['getLikeClass'],
methods: {
// 权限
getCookie(name) {
let value = '; ' + document.cookie;
let parts = value.split('; ' + name + '=');
if (parts.length === 2) return parts.pop().split(';').shift()
},
//点击增加收藏和点赞（动画和样式）
addLike() {
//判断是点赞
if (this.likeClass) { //说明已经点赞，这次是取消
this.like = !this.like; //-1显示
this.likeClass = !this.likeClass; //样式还原
this.setLikeCount(); //请求点赞
} else {
this.isLike = !this.isLike; //说明未点赞，这次是点赞，显示+1
this.likeClass = !this.likeClass;
this.setLikeCount();//请求点赞
}
},
//发送请求记录点赞
setLikeCount: function () {
if (this.isLike) { //如果是点赞 +1
this.$http.post(this.postLike, qs.stringify({
'article_id': this.$route.query.id,
'from_uid': this.$store.state.userId,
}), {headers: {'X-CSRFToken': this.getCookie('csrftoken')}}).then((res) => {
res = res.data;
// console.log(res);
let error = res.errmsg; //请求数据时点赞Id
if (res.payload && !res.status) {
this.$message({
message: '谢谢您的点赞',
type: 'success',
duration: 800
});
this.$emit('getArticleDetail')
} else {
this.$message({
message: '' + error + '，请先登录',
type: 'fail',
duration: 500
})
}
}).catch(function (error) {
alert(error)
});
} else {
this.$http.delete(this.cancleLike + this.commentLike_id + '/',
{headers: {'X-CSRFToken': this.getCookie('csrftoken')}})
.then((res) => {
res = res.data;
let error = res.errmsg;
// console.log(res);
if (res.payload && !res.status) {
this.$message({
message: '已取消点赞',
type: 'success',
duration: 800,
});
this.$emit('getArticleDetail')
} else {
this.$message({
message: '' + error + '',
type: 'fail',
duration: 8
})
}
});
}
},
beforeEnter(el) {
//动画开始进入前
el.style.transform = "translate(0,0)"
},
enter(el, done) {
// console.log(el);
//动画执行时
el.offsetWidth;
el.style.transform = "translate(10px,-22px)";
el.style.transition = "all 0.6s ease";
done()
},
afterEnter(el) {
//动画结束时
// console.log(this.likeClass);
if (this.likeClass) { // 如果是true动画出现的是+1，出现后再隐藏
this.isLike = !this.isLike;
} else {
this.like = !this.like;
}
},
},
watch: {
getLikeClass: {
// 深度监听
handler(val) {
this.commentLike_id = val.technicalListDetail.is_zan; //取消点赞时用
//进入详情页判断是否已经点赞
this.likeClass = this.commentLike_id !== undefined;
this.icon = val.icon;
this.postLike = val.postLike;
this.cancleLike = val.cancelLike;
// console.log(this.cancleLike)
},
deep: true
}
}
}
</script>
<style scoped lang="stylus">
.isZan-container {
cursor: pointer
font-size 14px
color :grey
.container-inner {
position relative
.isLike { //点击后，图标选中样式
color: #FF3300
}
.addOne { //动画+1
position absolute
right 0
top: 0px
font-size 20px
font-weight bold
color #FF3300
}
.cancleOne{ //-1的样式
position absolute
right 0
top: 0
font-size 20px
font-weight bold
color darkgreen
}
i {
font-size 20px
}
}
.container-inner:hover {
/*color green*/
font-size 16px
}
}
</style>
父组件中传入的数据giveFollow : { technicalListDetail: { // 在进入页面时请求数据获取 t_zan: "", is_zan: '' }, icon: "icon-ali-appreciate", postLike: API.appreciateArticle_list, cancelLike: API.appreciateArticle_detail, title: "点赞数" },使用：在父组件中解释：giveFollow是父组件传递给子组件的数据，getArticleDetail是父组件才加载时就获取数据的函数。
<is-like :getLikeClass="giveFollow" @getArticleDetail="getArticleDetail"></is-like>
