vue实现关注与取消关注的按钮
先上效果图:关注前:关注后:鼠标悬浮:template部分:<template><div><button@click="favor"class="my_button" :style="{backgroundColor:bg_color, color: ft_color,}"...
·
先上效果图:
关注前:
关注后:
鼠标悬浮:
template部分:
<template>
<div>
<button @click="favor"
class="my_button" :style="{backgroundColor:bg_color, color: ft_color,}"
@mouseenter="change()" @mouseleave="goback()">
{{content}}
</button>
</div>
</template>
script部分:
<script>
export default {
name: "zan",
data () {
return{
liked:false,
content:'+关注',
bg_color:"#fef0f0",
ft_color:"#f56c6c",
}
},
methods:{
favor (e) {
this.liked=!this.liked;
if(this.liked){
this.content="已关注";
this.bg_color="#f56c6c";
this.ft_color="#fef0f0";
}
else{
this.content="+关注"
this.bg_color="#fef0f0";
this.ft_color="#f56c6c";
}
},
change(){
this.bg_color="#ff9999";
this.ft_color="#fef0f0";
},
goback(){
if(this.liked){
this.bg_color="#f56c6c";
this.ft_color="#fef0f0";
}
else{
this.bg_color="#fef0f0";
this.ft_color="#f56c6c";
}
}
}
}
</script>
style部分:
<style >
button{
outline:none;
}
.my_button{
color: #f56c6c;
background: #fef0f0;
border: #fbc4c4 solid;
border-radius: 20px;
padding: 12px 23px;
text-align: center;
font-size: 16px;
-webkit-transform: scale(0.7);
}
</style>
分析:
1.总的来说,就是一个class(my_button
),三个绑定事件(favor,change,goback
),四个全局变量(liked, content,bg_color,ft_color
)。主要分析3个绑定事件是如何修改4个全局变量的。
2.my_button
用于设定关注按钮的初始样式,参考的是el-button
,没什么可分析的。
3.liked
变量,记录是否关注,取假表示未关注,取真表示已关注;content
变量记录按钮的内容;bg_color
按钮背景色,ft_color
字体颜色。
4.favor函数:绑定click事件,鼠标点击后修改liked的值,即修改是否点赞的状态;如果liked取真,则修改content为已关注
,修改bg_color为#fef0f0
,修改ft_color为#f56c6c
;如果liked取假,修改bg_color为#f56c6c
,修改ft_color为#fef0f0
,修改content为+关注
更多推荐
已为社区贡献5条内容
所有评论(0)