vue实现评分效果

各大框架都有评分特效用起来也很方便心血来潮用vue简单写个评分组件<body><div id="app"><star :count="10" v-model="myscore"></star></div></body><script src="https://cdn.j...

lhysunshine

3670人浏览 · 2020-03-08 18:15:37

lhysunshine · 2020-03-08 18:15:37 发布

各大框架都有评分特效用起来也很方便
心血来潮用vue简单写个评分组件

<body>
    <div id="app">
        <star :count="10" v-model="myscore"></star>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component("star", {
        props:{
        //小星星的总个数
            count:{
                type:Number,
                default:10
            },
        //评分的小星星的个数
            value:{
                type:Number,
            },
          //可自定义小星星的颜色 默认是金色
            color:{
                type:String,
                default:"gold"
            }
        },
        //vue中不能直接更改props里面的数据 组件需要实现的就是点击的时候更改value的值，然后告诉外面 value的值已经更改了  此时 在data中就可以用myscore复制一份value进行更改  用一个中间变量mytempscore来显示鼠标进入和离开的值，最后点击的时候确定评分
       //鼠标进入时，把鼠标所放在的星星的值给mytempscore，当星星的值小于等于mytempscore时，星星的颜色时亮的;鼠标离开时，把一开始的myscore的值给mytempscore，此时，星星评分就是所点击的myscore确定的值了;当点击的时候，把点击的星星的值给myscore，同时，对myscore进行监视，通过$emit将最终的myscore值传出去
        data() {
            return {
                myscore:this.value,
                mytempscore:this.value
            }
        },
        template:`
        <div>
            <i class="iconfont star"
             :class="item<=mytempscore?'icon-xingxing':'icon-xingxing1'" 
             @mouseenter="mytempscore=item"
             @mouseleave="mytempscore=myscore"
             @click="myscore=item"
              v-for="item in count"
              :style="{color:color}"></i>
        </div>
        `,
        //监视myscore，将最终确定的值传出去
        watch: {
            myscore(val) {
            this.$emit('input',val)
        }
        },

    })
    new Vue({
        el:"#app",
        data() {
            return {
                myscore:5
            }
        },
    })
</script>

效果图：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^