各大框架都有评分特效 用起来也很方便
心血来潮 用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>
效果图：
2738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
