vue 自定义星星评分组件

最近做的项目里面需要用到一个评分的组件，先看看效果

点击星星会有相应的分数，然后可以左右滑动改变分数。

不墨迹直接上代码
主体：

<template>
  <div class="star-box">
    <ul class='star-list' @touchstart="touchStart" @touchmove="touchMove" ref="star">
      <li class="star-item" v-for="(i,index) in scoreList" :key="index" :class="{half: i.state == 1, full: i.state == 2}"></li>
    </ul>
  </div>
</template>

样式：

.star-box{
   
   
  display: flex;
  align-items:center;
  .star-item{
   
   
    display:inline