最近做的项目里面需要用到一个评分的组件,先看看效果
点击星星会有相应的分数,然后可以左右滑动改变分数。
不墨迹直接上代码
主体:
<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