外卖项目Vue实现一个星级评分组件

你的名字 2023-06-05 08:25 144阅读 0赞

星级评分在WEB开发中经常可能会用到，因此把他封装成一个vue组件是很合适的，要做的效果如下：

1693641-20190830195241358-307305124.png

因此我们需要通过后台传递过来的score来写业务逻辑

1693641-20190830195503778-1048582458.png

比如这个模拟数据，3.6分就应该是三颗半星，小于3.5分大于3分的依旧按3分判断

在设计给出的图标中单颗星级有无星级，半颗，以及一颗

1693641-20190830195425746-1791637354.png

根据星星的大小，还会给出24,36,48格式大小的星星，因此这个组件的逻辑还是比较复杂的

1693641-20190830195814697-621513233.png

star组件需要两个从外部传递进来的参数，一个是star的大小，一个是分数

因此在props里定义这两个从外部传递进来的变量

1693641-20190830195954123-143691852.png

首先处理size，也就是传递进来星星的大小

使用计算方法，加上star-的前缀来+this.size 区分要传递进来的大小

1693641-20190830200224044-767971847.png

这样就绑定了基本样式和附加的样式，组件会根据传递进来不同的size渲染出不同的类名

1693641-20190830200307173-1035815192.png

接下来就可以根据不同的类名来写不同的样式，也就是使用不同大小的背景图片

1693641-20190830200501568-191861994.png

接下来应该根据score的大小循环遍历，判断是渲染星还是半星还是空心，这个数据应该是个数组[on,on，on，half,CLS_OFF]，这个数组就能代表了3.6分的显示

1693641-20190830200836907-704191330.png

同样在计算属性里添加一个方法获取到数组形式的数据

1693641-20190830201236486-731742886.png

使用v-for循环遍历这个数组，并且把数组项设置成每一项的className

1693641-20190830201327801-1209644533.png

设置每一项l类名对应的样式

1693641-20190830201450271-342834458.png

其他两个大小的star也是这样

1693641-20190830201542411-873660277.png

在header父组件中导入这个组件

1693641-20190830201722044-612153401.png

使用该组件，并传递参数进去

1693641-20190830201748276-1314932065.png

查看效果是否已经实现了：

1693641-20190830201848721-1035017239.png

改变参数再做测试

1693641-20190830202010216-1284853221.png

好了，基本没啥问题了，完整组件代码已经上传到码云，在\src\components\star

https://gitee.com/delisteam/elestar-component

转载于:https://www.cnblogs.com/rmty/p/11436953.html

发表评论

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

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

相关阅读

    相关 Vue 星级评分组件

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

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