72a0d58eb3
- 修改 QuestionBefore 组件中 is_option_group 的默认值为 0- 调整 RateCharacter组件中 rate_item 的样式 - 优化 LastSurvey 组件中 survey_remark 的样式，添加文本溢出处理 - 更新 Survey Index组件中的问卷描述显示方式，支持 HTML 内容 - 统一 fetchSurveys 等异步函数的格式
132 lines
2.3 KiB
Vue
132 lines
2.3 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 model = defineModel('model', { type: Number, required: true });
|
|
const rateItem = ref([
|
|
{
|
|
label: 1,
|
|
active: false
|
|
},
|
|
{
|
|
label: 2,
|
|
active: false
|
|
},
|
|
{
|
|
label: 3,
|
|
active: false
|
|
},
|
|
{
|
|
label: 4,
|
|
active: false
|
|
},
|
|
{
|
|
label: 5,
|
|
active: false
|
|
}
|
|
]);
|
|
|
|
const config = defineModel('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(
|
|
() => [config.value.min, config.value.max, config.value.score_interval],
|
|
(newValues) => {
|
|
const [newMin, newMax, newScoreInterval] = newValues;
|
|
renderScore(newMin, newMax, newScoreInterval);
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
ul {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
//margin-bottom: 10px;
|
|
}
|
|
|
|
.rate_item {
|
|
//padding: 1px 3px;
|
|
min-width: 20px;
|
|
//width: 20px;
|
|
//height: 20px;
|
|
|
|
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>
|