uniapp调查问卷评价功能

 我本来用的是uniapp官方提供的组件uni-rate组件，但修改成我想要的样式有点麻烦，于是我就自己手写一个，比用组件简单一点；

 

dom结构 

<text class="formTit must">请您对本次活动进行评价</text>
<view class="evaluate mb-40rpx">
    <view class="row" v-for="(val, index) in starName" :key="index">
      <view class="progress" :class="star > index ? 'selected' : ''" @click="setStar(index + 1)"> </view>
      <text class="tit" :class="star == index + 1 ? 'active' : ''">{{ val }}</text>
    </view>
</view>

 js部分

// 评价
const star = ref(2); //评价，默认2星
const starName = ["差", "一般", "较好", "好"];
const setStar = (val: any) => {
  star.value = val;
};

 css部分（我用的是scss + tailwindcss，不懂的可以去看看，很方便，写入类名就可以改变样式）

.formTit {
    @apply block text-#363A44 text-32rpx font-bold mb-20rpx mt-40rpx;
  }

  .must {
    &::after {
      font-size: 32rpx;
      color: #f00;
      content: "*";
    }
}
.evaluate {
    @apply w-full flex justify-between items-center;

    .row {
      @apply w-full flex flex-col justify-center items-center;

      width: calc((100% - 6rpx) / 4);

      &:nth-of-type(1) {
        .progress {
          border-radius: 12rpx 0 0 12rpx;
        }
      }

      &:nth-of-type(4) {
        .progress {
          border-radius: 0 12rpx 12rpx 0;
        }
      }
    }

    .progress {
      @apply w-full bg-#eef5ff h-40rpx;
    }

    .selected {
      background-color: #428ffc;
    }

    .tit {
      @apply w-full text-32rpx text-#9B9B9B text-center pt-20rpx;
    }

    .active {
      @apply text-#363a44 font-bold;

      color: #363a44;
    }
  }