封装一个丝滑的评分组件

效果

实现

找到喜欢的图标

www.iconfont.cn/

打开 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 件事

1. 改变父组件的值
2. 改变颜色
3. 实现开头的丝滑动画

这里用一个showAnimation变量控制动画展示

再改变父组件的值，父组件的值一变，自己的颜色也会跟着变

还差个动画，只要让动画在其中一段不停反复横跳，即可实现国际友好手势

但这样有问题，只有第一次触发动画才有动效，后续需要改变showAnimation的值

那么怎么知道动画什么时候结束呢？

答案是事件onanimationend，只要在这个事件把动画关掉，点击时开启即可

ok，实现最主要的组件了，另一个点赞就是复制改东改西，大家都会

组合组件

接下来需要把点赞和点踩组合一起，那就叫Group吧

需要实现逻辑

1. 根据父组件的值，动态展示
2. 点击时传递一个事件，告诉父组件，究竟是点赞还是点踩
3. 提供一个值，锁定按钮，因为点完之后一般都不能反悔
4. 提供样式设置，传递到子组件

类型

传递一个固定类型的值，才能分辨是什么操作

null就是初始状态，无操作，另外俩见名知义

那么现在需要编写自身的状态

• wasChoose是否有按钮被选中
• disabled当被选中，同时父组件完成(done)，就禁用

样式

初始化

建议写代码都提供一个入口，后面有空出一期如何像写诗一般写代码

事件

当被点击时，改变两个状态，没什么好说的，完成

测试

源码: gitee.com/cjl2385/dig...