五分鐘用vue實現一個五星打分效果

實現一個像這樣的五星打分

<template>
    <div> 
        <div class="mask">
            <div class="pop"></div>
            <div class="box center_box">
                <p class="center title">評價</p>
                <div style="margin: 23px 0 30px;">
                    <span v-for="(item, index) in star" :key=index class="s" :class="{'active':index <= s_l}" @click="getStar(index)"></span>
                    <span class="s5 fr">{{score}}分</span>
                </div>
                <textarea placeholder="請輸入對此服務的評價" v-model="content"></textarea>
            </div>
        </div>
    </div>
</template>
    export default {
        data() {
            return {
                score: 0,
                content: '',
                star: [0,1,2,3,4],
                s_l: -1,
                old_index: null,
            }
        },
        computed: {
            ...mapState(['userInfo'])
        },
        methods: {
            getStar(index)  {
                if (this.old_index == index) {
                    this.s_l = index - 1;
                    this.score--;
                    this.old_index--;
                    return
                }
                this.s_l = index;
                this.score = index+1;
                this.old_index = index;
            }
        }
      }
<style lang='scss' scoped>
    .fr {
        float: left;
     }
     .center {
         text-align: center;
     }
    .center_box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    .mask {
        .pop {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.3;
        }

        .box {
            color: #333;
            background: #fff;
            padding: 27px 70px;
            border-radius: 20px;

            .title {
                font-size: 24px;
            }

            .s {
            
                display: inline-block;
                width: 35px;
                height: 35px;
                margin-right: 10px;
                background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAMAAAAAh4u3AAAAk1BMVEUAAAAcHBwyMjIyMjIyMjIqKiozMzMzMzMyMjIyMjIxMTEzMzMyMjIyMjIyMjIyMjIxMTExMTEyMjIyMjIyMjIyMjIyMjIwMDAwMDAyMjIyMjIyMjIwMDAxMTEwMDAyMjIyMjIxMTExMTExMTEyMjIvLy8zMzMyMjIyMjIxMTEyMjIxMTEtLS0yMjIzMzMyMjIzMzO5DYebAAAAMHRSTlMABOvcRAro2J9eFOLMr5ZOPjf1v7akcyIQiINqMSkZxql4Y1QtJh6akH5XUxzu0qiSBX7YAAABLUlEQVQ4y42TB5KDMAxFbUNsOpjeW0L6lvufboHsboJtTDTDCMMbSXx9ABsJ0SDYiiCO8i3GU6CBjA1Ii8erkzNzldKUT3U5zXPpMqbGyZQoTiWQEz/yOZQ03P2+g2G7A5sBNaKC7bgqVkz/y6W9Ywck5IupjuX7mNg9BIPiFDevgitD1tWeeOMeUnnfgzkC50a6KordKWXKYZ1xkfu40dHq5+rPAuoatTeT50HFtYg5ovL1mH+JoOiy1ANXokLMAjOBsQuN9bYl6Kazvv3gocZjn3zzkFWym/R5KGTVGxQeOhWstjYP9ZH4F6B5QExL02eBEpOBPum0ckvJ1CqhhY2yyWXmsIR8CO4hcf8MenfQKJJ9XRoaGR3uXj1cBs3NZtRsfe3I+i1qa/B+/AC1NQ9C0gGBsAAAAABJRU5ErkJggg==') no-repeat center center;
                background-size: cover;
                cursor: pointer;
                &.active {
                    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAiCAMAAADiW5DOAAAAgVBMVEUAAAD/Sy3/Sy3/Sy3/OiP/TC3/Si3/TCz/SCz/Sy3/Sy3/Syz/SSj/RiX/Sy3/Sy3/Sy3/Sy3/Sy7/Sy3/Sy3/Syz/Si3/Siv/Sin/SSv/OR3/Sy3/Sy3/Sy7/Sy3/Sy3/Syz/Sy3/Syz/Syz/Sy7/Sy3/Siz/TC7/TCz/QCb/TC45n2HWAAAAKnRSTlMA+ee/C/SiijTfzV4bD+zU0ci4pZSDTSwnIQf8rZeOd2dkUlCcmW5UQBQ7h2dZAAAA6klEQVQ4y42T2RKCMAxFUypQFnFhE0RUcM3/f6DAoEgM1PPWmdNOe3sDlKvxAA0VorHUOGtEPM4rChucecfClnpO8UXnbDTHdJynlRP2mCnw7CR+MBRnLGyBX4h4AZS7g4QgSvz3/sq2tq6JLCJwpO03weqQsNI6MShTo2xzAGXMKlbefcD0lYYOLOWkchvyc5EngoGMv7gzytpGAvP9GZsyKTaJkq1awTghcQ6Mc2FaSimIw8W4Ik7AOPvxu1LkSLiJMENPZWlS9lUof58l4me/zL3OkiMnbMu0G43JnoboCbem4xa5HvzNC59iXI+UN5RRAAAAAElFTkSuQmCC');
                }
            }
            .s5 {
                font-size: 24px;
                
            }
            textarea {
                width: 370px;
                height: 140px;
                padding: 19px;
                border: 1px solid #cccccc;
                border-radius: 20px;
            }
        }
    }

</style>