109 lines
1.8 KiB
Vue
109 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<ul>
|
|
<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';
|
|
|
|
const rateItem = ref([
|
|
{
|
|
label: 1,
|
|
active: false
|
|
},
|
|
{
|
|
label: 2,
|
|
active: false
|
|
},
|
|
{
|
|
label: 3,
|
|
active: false
|
|
},
|
|
{
|
|
label: 4,
|
|
active: false
|
|
},
|
|
{
|
|
label: 5,
|
|
active: false
|
|
}
|
|
]);
|
|
|
|
const props = defineProps({
|
|
config: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const model = defineModel();
|
|
|
|
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;
|
|
};
|
|
// 重置颜色
|
|
const getItem = (value) => {
|
|
model.value = value.label;
|
|
rateItem.value.forEach((item, index) => {
|
|
rateItem.value[index].active = item.label <= value.label;
|
|
});
|
|
};
|
|
|
|
watch(model, () => {
|
|
getItem({ label: model.value, active: false });
|
|
});
|
|
|
|
// 监听 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 {
|
|
margin: 0 3px;
|
|
margin-top: 5px;
|
|
padding: 0 7px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
color: #666;
|
|
}
|
|
|
|
.active_item {
|
|
background-color: #70b936;
|
|
color: #fff;
|
|
}
|
|
</style>
|