vue实现一个星级打分效果_vue 星星评分组件

评分插件在购物的应用中经常可以看得到，但是用着别人的总是没有自己写的顺手，正好趁着这段时间做一个移动端应用的时候写了一个基于VUE的评分组件，功能没有写全

效果图.gif

主体结构：

.scoreLayer(v-show="isShowScore" @click="hideScoreLayer($event)")

.center-box

.star-box.flex-between

ul.star-list(@touchstart="touchStart" @touchmove="touchMove" ref="star")

li.star-item(

v-for="i in scoreList"

:class="{half: i.state == 1, full: i.state == 2}"

)

p.star-num { {score}}分

button.btn-confirm(@click="submit") 确定

最外层是一个遮罩，因为评分做成一个弹框形式，因此给弹框一个层，让其浮动在其他内容之上

接下来是样式设计：

.flex-between

display flex

justify-content space-between

.scoreLayer

display flex