vue组件star开发基于vue-cli

最新推荐文章于 2025-01-14 09:46:22 发布

weixin_30363509

最新推荐文章于 2025-01-14 09:46:22 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/l8l8/p/9379809.html

本文介绍了一个基于 Vue 的星级评分组件实现方法。通过使用 div 元素结合 CSS 样式来展示不同状态下的星星图标，并利用 Vue 的指令如 v-for 进行循环渲染，同时实现了鼠标悬停预览评分效果及点击确定评分的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
   <div class="stars">
        <div v-for="(item,ind) in num" :key="ind" 
        :class="{'on':ind<=cur}" 
        @mouseover='enter(ind)'
        @mouseleave="out()"
        @click="ok(ind)"></div>
   </div>
</template>
<script>
    export default{
    name:'Star',
    data(){
        return{
            num:5,
            cur:-1,
            flag:false
        }
    },
    methods:{
        enter(ind){
            if(!this.flag){
                this.cur=ind;
            }
        },
        out(){
            if(!this.flag){
                this.cur=-1;
            }
        },
        ok(ind){
           this.flag=true;
           this.cur=ind; 
        }
    }
    }
</script>
<style scoped>
    .stars div{
           width: 56px;
        height: 59px;
        background: url('../../static/img/off.png') no-repeat;
        float: left;
    }
    .stars .on{
        width: 56px;
        height: 59px;
        background: url('../../static/img/on.png') no-repeat;
    }
</style>