teacher-assessment/src/components/QuestionTypeShow.vue

<template>
    <!-- 单选  -->
    <el-radio-group
        v-model="questionVal"
        v-if="[0,3].includes(Number(questionType))" 
        :class="{vertical:!isHorizontal}"> 
        <el-radio v-for="radioItem in questionSubOptions" 
            :key="radioItem.id" 
            :value="radioItem.id"
        >
            {{ radioItem.content }}
    </el-radio>
    </el-radio-group>
        
    <!-- 多选 -->
    <el-checkbox-group 
        v-model="questionVal"
        v-else-if="Number(questionType) === 1" 
        :class="{vertical:!isHorizontal}">

        <el-checkbox 
            v-for="checkItem in questionSubOptions" 
            :key="checkItem.id"
            :label="checkItem.content"
            :value="checkItem.id"
        />
    </el-checkbox-group>

    <!-- 问答题 -->
    <el-input  
        v-model="questionVal"
        v-else-if="Number(questionType) === 2"
        :autosize="{ minRows:5, maxRows: 5 }" 
        type="textarea" 
        :rows="5"  
        placeholder="不超过2000字"
    />

    <!-- 评价(分)题 5 -->
    <template v-else-if="Number(questionType) === 5 ">
        <ul class="num_score" v-if="Number(evaluationType) === 0 && Number(questionScore)">
            <li v-for="value in Number(questionScore)" 
                :key="value"
                :class="{active:questionVal == value}" 
                @click="questionVal = value">
                {{ value }}分
            </li>
        </ul>
        <div class="star_score" v-else-if="Number(evaluationType) === 1 && Number(questionScore)">
            非常不满意
            <el-rate size="large"   
                v-model="questionVal"
                :colors="['#2e64fa','#2e64fa','#2e64fa']"
                :max="Number(questionScore)" 
                clearable />
            非常满意
        </div>
    </template>
</template>


<script setup lang="ts">
import {ref} from 'vue'

interface Option {
    content: String
    score?: String
    id?: Number
}
const props = defineProps({
    questionType:{  //题目展示类型  单选0/多选1/问答2/评分单选3 / 评分题4
        type:[Number,String],
        required:true
    },
    isHorizontal:{    //单选/多选 选项 水平/垂直 排列
        type:Boolean,
        default:true,
        required:true
    },
    questionSubOptions:{   // 单选/多选 选项列表
        type:[Array<Option>,null],
    },
    evaluationType:{    //评分题 分值的展示形式  0 数字  1 星星
        type:[Number,String,null],
    },
    questionScore:{   // 评分题 题目的分值
        type:[Number,null]
    }

})

const questionVal = ref()

</script>


<style lang="scss" scoped>
.el-checkbox-group,
.el-radio-group{
    display: flex;
    flex-direction: row;
    gap: 5px 15px;
    flex-wrap: wrap;
}

.el-checkbox-group.vertical,
.el-radio-group.vertical{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap:5px;
}

.el-checkbox-group,
.el-radio-group
{
    overflow: auto;
    :deep(.el-radio),
    :deep(.el-checkbox){
        display: flex;
        align-items: flex-start;
        height: auto;
        margin: 0;

        .el-radio__input,
        .el-checkbox__input{
            height: 21px;
            display: flex;
            align-items: center;
        }
        .el-radio__label,
        .el-checkbox__label{
            line-height: 21px;
            overflow: auto;
            word-break: break-all !important;
            white-space: normal !important;
        }
    }
}


.num_score,
.star_score
{
    display: flex;
    align-items: center;
    gap:16px;
    color: #CCCCCC;
    line-height: 1;
    font-size: 14px;
}
.num_score{
    flex-wrap: wrap;
    li{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px ;
        border: 1px solid #CCCCCC;
        width: 44px;
        height: 32px;
        background-color: white;
        cursor: pointer;

        &.active{
            background-color: #2E64FA;
            color: white;
            border:none;
        }
    }
}

.star_score{
    word-break: keep-all;
    .el-rate{
        display: flex;
        flex-wrap: wrap;
        gap:10px 20px;
        height: auto;
    }
} 
</style>