基于Vue的星级评分

最新推荐文章于 2024-06-18 10:20:00 发布

coldriversnow

最新推荐文章于 2024-06-18 10:20:00 发布

阅读量673

点赞数

文章标签： vue

原文链接：https://blog.csdn.net/qq_16371909/article/details/79352348

版权

年前的一个项目中做到一个星级评分功能，以前都是用jquery.raty.js这款插件来做的，这个插件确实封装的很方便也很好用，但是毕竟是一个函数库（考虑各种适配，健壮，可扩展），代码行数还是有一点的，所以这次自己写了一个，70行搞定，星星数量，样式自己都可以设置，为了保留思路，我没有进行彻底的抽象封装。

效果图如下：

这里写图片描述

代码如下，思路都在注释里！

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>星星打分</title>
    </head>

    <body>

        <div id="app" class="row">
            <div class="form-group clearfix">
                <label class="control-label col-md-4">星星数量:{{starNum}}分</label>
                <div class="col-md-8">
                    <div class="grade-box">
                        <img v-for="(star,index) in stars" v-bind:src="star.src" v-on:click="rating(index)" alt="星星图片" />
                    </div>
                </div>
            </div>
        </div>

        <script src="vue.js"></script>
        <script>
            //星星的图片路径
            var starOffImg = "img/starOff.png";
            var starOnImg = "img/starOn.png";

            var app = new Vue({
                el: "#app",
                data: {
                    stars: [{
                            src: starOffImg,
                            active: false
                        }, {
                            src: starOffImg,
                            active: false
                        }, {
                            src: starOffImg,
                            active: false
                        },
                        {
                            src: starOffImg,
                            active: false
                        }, {
                            src: starOffImg,
                            active: false
                        }
                    ],
                    starNum: 0,
                },
                methods: {
                    //评分
                    rating: function(index) {
                        var total = this.stars.length; //星星总数
                        var idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量

                        //进入if说明页面为初始状态
                        if(this.starNum == 0) {
                            this.starNum = idx;
                            for(var i = 0; i < idx; i++) {
                                this.stars[i].src = starOnImg;
                                this.stars[i].active = true;
                            }
                        } else {
                            //如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
                            if(idx == this.starNum) {
                                for(var i = index; i < total; i++) {
                                    this.stars[i].src = starOffImg;
                                    this.stars[i].active = false;
                                }
                            }
                            //如果小于当前最高星级，则直接保留当前星级
                            if(idx < this.starNum) {
                                for(var i = idx; i < this.starNum; i++) {
                                    this.stars[i].src = starOffImg;
                                    this.stars[i].active = false;
                                }
                            }
                            //如果大于当前星级，则直接选到该星级
                            if(idx > this.starNum) {
                                for(var i = 0; i < idx; i++) {
                                    this.stars[i].src = starOnImg;
                                    this.stars[i].active = true;
                                }
                            }

                            var count = 0; //计数器-统计当前有几颗星
                            for(var i = 0; i < total; i++) {
                                if(this.stars[i].active) {
                                    count++;
                                }
                            }
                            this.starNum = count;
                        }
                    },
                }
            })
        </script>

    </body>

</html>

原文地址：https://blog.csdn.net/qq_16371909/article/details/79352348

coldriversnow

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于Vue的星级评分

年前的一个项目中做到一个星级评分功能，以前都是用jquery.raty.js这款插件来做的，这个插件确实封装的很方便也很好用，但是毕竟是一个函数库（考虑各种适配，健壮，可扩展），代码行数还是有一点的，所以这次自己写了一个，70行搞定，星星数量，样式自己都可以设置，为了保留思路，我没有进行彻底的抽象封装。效果图如下：代码如下，思路都在注释里！<!DOCTYPE html><html> <head> <meta charse
复制链接

扫一扫