效果
实现
找到喜欢的图标
打开 iconfont
,随便搜个点赞,仅需一个点赞即可,节省内存,另一个用CSS
完成
下载解压
取出如下文件,在项目入口导入 iconfont.css
,或者统一放入一个文件导入也行
编写组件
一个点赞,就叫Like
一个点踩,就叫Hate
吧
Hate
点踩组件
先写属性,就几个,不用注释也明白
分别是
- 绑定值 modelValue
- 默认颜色 defaultColor
- 激活颜色 activeColor
- 大小 size
HTML
给个容器,再加个固定格式(xxx-container
)的容器类名,防止样式穿透
再把iconfont
样式加上,图标就出来了
这些用VSCode
自定义代码片段都能自动生成
现在是这样的图标,也就是点赞
那么怎样让它变成点踩手势呢?答案是rotate
旋转
加上下图类名有用吗? 答案是没用,他并不会旋转
为什么呢?因为i
标签是行盒模型,必须变成块盒才行
方式有很多,不过我就爱flex
,优点很多,这里就不赘述了
这不就转起来了吗
动效
加个鼠标移入变色效果,考虑到一会还有另一个点赞组件,那就写个通用的sass
吧
接收一个激活颜色和默认颜色参数
导入并使用,下面用了个v-bind
绑定当前被点击的颜色,下面来实现逻辑
上面接收了一个modelValue
,类型是布尔值,当他为真时就把颜色改为激活颜色
于是就理所当然的使用计算属性
事件
当被点击或hover
时,就激活图标颜色,现在还差点击
点击事件要做 3
件事
- 改变父组件的值
- 改变颜色
- 实现开头的丝滑动画
这里用一个showAnimation
变量控制动画展示
再改变父组件的值,父组件的值一变,自己的颜色也会跟着变
还差个动画,只要让动画在其中一段不停反复横跳,即可实现国际友好手势
但这样有问题,只有第一次触发动画才有动效,后续需要改变showAnimation
的值
那么怎么知道动画什么时候结束呢?
答案是事件onanimationend
,只要在这个事件把动画关掉,点击时开启即可
ok,实现最主要的组件了,另一个点赞就是复制改东改西,大家都会
组合组件
接下来需要把点赞和点踩组合一起,那就叫Group
吧
需要实现逻辑
- 根据父组件的值,动态展示
- 点击时传递一个事件,告诉父组件,究竟是点赞还是点踩
- 提供一个值,锁定按钮,因为点完之后一般都不能反悔
- 提供样式设置,传递到子组件
类型
传递一个固定类型的值,才能分辨是什么操作
null
就是初始状态,无操作,另外俩见名知义
那么现在需要编写自身的状态
wasChoose
是否有按钮被选中disabled
当被选中,同时父组件完成(done
),就禁用
样式
初始化
建议写代码都提供一个入口,后面有空出一期如何像写诗一般写代码
事件
当被点击时,改变两个状态,没什么好说的,完成