Vue 星级评分组件

向右看齐 2023-02-13 11:30 84阅读 0赞

Vue 星级评分组件

描述：其实很早就有想做一个星级评分的组价了，并且想写一些组件的代码库，就是在自己没事的时候造一些轮子，在工作的时候直接 Ctrl + C 和 Ctrl + V。别人还在苦苦加班写东西的时候，你已经开开心心下班，该干嘛干嘛去了，是不是很爽，哈哈哈哈…
这里插播一个自己的心得。声明一下我并没有说别人开源的东西不好，或者别人有开源伸手即得的东西干嘛还要自己从新写。个人的体会就是，别人的东西也要用，自己的东西也要写，两者并不冲突，并且是一个相辅相成的关系。只有在用了别人的东西多了，才会发现有哪些东西设计的不好，如果然你自己来自己会怎么做，总结出一套个人的经验出来（其实看多了，很多东西的套路都是差不多的，哈哈），这样日后真的有组团队开发的时候不至于一脸懵逼。
再来说说为什么要写。不知道大家有没有这样的体会，很多时候，看别人的东西（特别是视屏教程），一边对着文档（视屏）看源码，特别容易懂，等过一个几天在回来看的时候，感觉又是新的，又要开从头开始。这里面的最重要原因就是你没有动手做写，并没有把别人的东西转化成为你自己的。所以当你开始动手写的时候，你会发现，原来很多不起眼的东西，他们往往就是突破问题的关键，是你以前无法突破的瓶颈。
说了一大堆，感觉重点就是：自己要多去尝试，多动手去写，探索的这些时间不会白费的，日后总会还回来的，毕竟：磨刀不误砍材工！

步入正题…

移动端星级评分组件

说明：该组件仅限在移动端使用，并且在 Vue 项目中

实现的功能点：

  • 核心：用户点击相应的星星时，能够通过事件的形式，把分数派发出来，只要监听：starMarkChange 事件即可
  • 可以配置星星的数量，默认点亮的个数，是否是只读，等

使用方式

目前组件还没有通过 NPM 等包管理工具发出来，如果有老铁需要尝试，只要创建一个 .vue 的文件，就像是自己写的组件一样通过 import 引入就好。

属性

  • starNum 星星的个数，默认：5，只接受 Number 类型数据
  • defaultRating 默认点亮星星的个数，默认：5，只接受 Number 类型数据
  • readOnly 是否是只读，用户不能点击星星，也不会触发事件，在只做展示的场景会非常有用
  • outIndex 外部传进来的一个标志位，在循环做评分列表，标记外部的索引值的时候会比较有用，这样可以快速定位到某项。他会做为 starMarkChange 事件的的第二个参数

事件

  • starMarkChange 点击星星时派发的事件，派发参数：mark，星星的分数，Number类型，还有外部的索引值，如果外部有绑定的情况

星星图片

发表评论

表情：
评论列表 （有 0 条评论，84人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 星级评分组件

    Vue 星级评分组件 描述：其实很早就有想做一个星级评分的组价了，并且想写一些组件的代码库，就是在自己没事的时候造一些轮子，在工作的时候直接 Ctrl + C 和 Ctr

    向右看齐向右看齐/ 0 赞/ 85 阅读