vue 星星评分组件

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

主体结构：

.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
  align-items center
  justify-content center
  background-color rgba(0,0,0,.3)
  .center-box
    padding-top 0.4rem
    padding-bottom 0.4rem
    width 50%
    background-color #FFF
    border-radius 5px
    box-shadow 0 0 5px #ccc
    .star-box
      padding 0 0.2rem
      align-items center
    .star-item
      display inline-block
      width 0.5rem
      height 0.5rem
      background url('./img/emptyStar.png') no-repeat center
      background-size 0.5rem 0.5rem
      &.half
        background url('./img/halfStar.png') no-repeat center
      &.full
        background url('./img/fullStar.png') no-repeat center

基本样式就不多说了，将该组件的效果实现吧

export default {
   
  data () {
   
    return {
   
      x0: 0,