ylst-h5/src/views/Design/components/Questions/RateCharacter.vue

<template>
  <div>
    <ul :key="test">
      <li
        v-for="(rate, rateIndex) in rateItem"
        :key="rateIndex"
        class="rate_item"
        :class="{ active_item: rate.active }"
        @click="getItem(rate)"
      >
        {{ rate.label }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { value as model } from '@/views/Design/components/Questions/hooks/useNPSHooks';

const rateItem = ref([
  {
    label: 1,
    active: false
  },
  {
    label: 2,
    active: false
  },
  {
    label: 3,
    active: false
  },
  {
    label: 4,
    active: false
  },
  {
    label: 5,
    active: false
  }
]);

const test = ref(1);

setTimeout(() => {
  test.value = 2;
}, 300);
const props = defineProps({
  config: {
    type: Object,
    required: true
  }
});

const index = defineModel('index', {
  type: Number
});
const emit = defineEmits(['change']);
const renderScore = (min, max, interval) => {
  const result = [];
  for (let i = min; i <= max; i += interval) {
    result.push({
      label: i,
      active: false
    });
    // 如果达到 10 条数据，停止生成
    if (result.length === 11) {
      break;
    }
  }
  rateItem.value = result;
};

// 重置颜色
function getItem(value) {
  // console.log(value.label);
  rateItem.value.forEach((item, index) => {
    rateItem.value[index].active = item.label <= value.label;
  });
  model.value = value.label;
}

watch(
  model,
  () => {
    getItem({ label: model.value, active: false });
    emit('change', index.value, model.value);
  },
  {
    // immediate: true
  }
);

// 监听 min、max 和 score_interval 的变化
watch(
  () => [props.config.min, props.config.max, props.config.score_interval],
  (newValues) => {
    const [newMin, newMax, newScoreInterval] = newValues;
    renderScore(newMin, newMax, newScoreInterval);
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
ul {
  display: flex;

  //margin-bottom: 10px;
}

.rate_item {
  width: 21px;
  height: 21px;
  margin: 0 5px 0 0;
  border: 1px solid #979797;
  border-radius: 5px;

  //padding: 0 6px;
  color: #000;

  //margin-top: 5px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.active_item {
  border-color: #70b936;
  background-color: #70b936;
  color: #fff;
}
</style>