封装一个丝滑的评分组件

效果

实现

找到喜欢的图标

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...

相关推荐
customer087 分钟前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf8 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
qq_3901617723 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web