vue实现答题卡页面

最新推荐文章于 2024-10-21 21:20:13 发布

地瓜没有花

最新推荐文章于 2024-10-21 21:20:13 发布

阅读量6.7k

点赞数 3

分类专栏：考试系统项目文章标签： javascript vue.js html css

本文链接：https://blog.csdn.net/elephant_my/article/details/114982707

版权

考试系统项目专栏收录该内容

7 篇文章 2 订阅

订阅专栏

样式如下

在这里插入图片描述

需要注意的点

实现题目内容的最外层即循环题目数据的位置谨慎使用div标签包裹，否则v-if控制的样式可能有问题。

使用`div`标签包裹并且在最外层设置题目样式的页面：

<div  class="topicContent" v-for="item in subjectType" :key="item.type"></div>

.topicContent{
   height: 184px;
    border-top: solid 1px #e6e6e6;
    padding: 15px 40px;
    .el-radio-group{
        display: block;
        padding: 5px 15px;
    }
    .el-checkbox{
        width: 100%;
        padding: 5px 15px;
    }
}

在这里插入图片描述

使用`div`标签包裹，但把样式设置在每个题型代码的上面：

<div v-for="item in subjectType" :key="item.type"></div>

在这里插入图片描述

使用`template`标签包裹，样式只能设置在每个题型代码的上面：

<!--具体题目内容-->
<template v-for="item in subjectType">
    <!--单选题-->
    <div v-if="item.type===`isRadio` && item.value" :key="item.type" class="radio-type">
        <div style="padding-bottom: 5px;">({{score}}分) {{topicTitle}}</div>
        <el-radio-group v-for="item in optionRadio" v-model="topicContent.radioItem" :key="item.value">
            <el-radio :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
    </div>
    <!--多选题-->
    <div v-if="item.type===`isCheckbox` && item.value" :key="item.type" class="checkbox-type">
        <div style="padding-bottom: 5px;">({{score}}分) {{topicTitle}}</div>
        <el-checkbox-group v-model="topicContent.checkedItem">
            <el-checkbox v-for="item in optionChecked" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
        </el-checkbox-group>
    </div>
    <!--填空题-->
    <div v-if="item.type===`isBlank` && item.value" :key="item.type" class="blank-type">({{score}}分)
        <span style="padding-bottom: 5px;" v-for="(item,index) in blankTitle.split('_').slice(0, blankTitle.split('_').length-1)" :key="index">
            <span>{{item}}{{"_______"}}</span>
        </span>
        <span>{{blankTitle.split('_')[blankTitle.split('_').length-1]}}</span>
        <div style="display: flex;flex-wrap: wrap;padding-top: 15px">
            <span v-for="(resultItem,resultIndex) in blankTitle.split('').filter(item => item === '_')" :key="resultIndex+100" style="padding-right: 15px">
                <span style="color: #666666;">第{{resultIndex+1}}空答案：</span>
                <a-input style="width: 180px" placeholder="请输入..."></a-input>
            </span>
        </div>
    </div>
    <!--简答题-->
    <div v-if="item.type===`isAnswer` && item.value" :key="item.type" class="answer-type">
        <div style="padding-bottom: 5px;">({{score}}分) {{topicTitle}}</div>
        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入..." v-model="topicContent.answerItem" style="padding-top: 10px"></el-input>
    </div>
</template>

/*题目内容*/
.radio-type{
    height: 184px;
    border-top: solid 1px #e6e6e6;
    padding: 15px 40px;
    .el-radio-group{
        display: block;
        padding: 5px 15px;
    }
}
.checkbox-type{
    height: 184px;
    border-top: solid 1px #e6e6e6;
    padding: 15px 40px;
    .el-checkbox{
        width: 100%;
        padding: 5px 15px;
    }
}
.blank-type{
    height: 184px;
    border-top: solid 1px #e6e6e6;
    padding: 15px 40px;
}
.answer-type{
    height: 184px;
    border-top: solid 1px #e6e6e6;
    padding: 15px 40px;
}
/*按钮样式*/
.button-style{
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-top: dotted 1px #e6e6e6;
}

在这里插入图片描述

需要注意的是： 在div标签上循环数据，需要讲key绑定在div标签上；若是使用template标签包裹的时候key只能单独绑定在其下面的每个子部份中并且template标签也是设置不上样式的。

完整代码

<!-- @description：个人中心--“练习本页”页面 -->
<!-- @author：my-->
<template>
    <div class="wts-container">
        <div class="do-exercise">
            <div style="width: 60%">
                <div class="exercise-up-page" @click="previousPage"><a-icon type="rollback" style="margin-right: 5px;"/>返回上一页</div>
                <div class="exercise-center">
                    <!--题目信息-->
                    <div style="height: 80px">
                        <el-row>
                            <el-col :span="2" style="padding-left: 40px;">
                                <div style="width: 56px;height: 56px;background-color: aqua"></div>
                            </el-col>
                            <el-col :span="22" style="padding-top: 2px; padding-left: 16px">
                                <el-row>
                                    <el-col :span="5">题目类型：<span class="topic-style">{{topicTypes}}</span></el-col>
                                    <el-col :span="4">题库分类：<span class="topic-style">{{topicClassify}}</span></el-col>
                                </el-row>
                                <el-row class="topic-information">
                                    <el-col :span="5">发布时间：{{publishTime}}</el-col>
                                    <el-col :span="4">作者：{{authorName}}</el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                    <!--具体题目内容-->
                    <template class="topicContent" v-for="item in subjectType">
                        <!--单选题-->
                        <div v-if="item.type===`isRadio` && item.value" :key="item.type" class="radio-type">
                            <div style="padding-bottom: 5px;">({{score}}分) {{topicTitle}}</div>
                            <el-radio-group v-for="item in optionRadio" v-model="topicContent.radioItem" :key="item.value">
                                <el-radio :label="item.value">{{item.label}}</el-radio>
                            </el-radio-group>
                        </div>
                        <!--多选题-->
                        <div v-if="item.type===`isCheckbox` && item.value" :key="item.type" class="checkbox-type">
                            <div style="padding-bottom: 5px;">({{score}}分) {{topicTitle}}</div>
                            <el-checkbox-group v-model="topicContent.checkedItem">
                                <el-checkbox v-for="item in optionChecked" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <!--填空题-->
                        <div v-if="item.type===`isBlank` && item.value" :key="item.type" class="blank-type">({{score}}分)
                            <span style="padding-bottom: 5px;" v-for="(item,index) in blankTitle.split('_').slice(0, blankTitle.split('_').length-1)" :key="index">
                                <span>{{item}}{{"_______"}}</span>
                            </span>
                            <span>{{blankTitle.split('_')[blankTitle.split('_').length-1]}}</span>
                            <div style="display: flex;flex-wrap: wrap;padding-top: 15px">
                                <span v-for="(resultItem,resultIndex) in blankTitle.split('').filter(item => item === '_')" :key="resultIndex+100" style="padding-right: 15px">
                                    <span style="color: #666666;">第{{resultIndex+1}}空答案：</span>
                                    <a-input style="width: 180px" placeholder="请输入..."></a-input>
                                </span>
                            </div>
                        </div>
                        <!--简答题-->
                        <div v-if="item.type===`isAnswer` && item.value" :key="item.type" class="answer-type">
                            <div style="padding-bottom: 5px;">({{score}}分) {{topicTitle}}</div>
                            <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入..." v-model="topicContent.answerItem" style="padding-top: 10px"></el-input>
                        </div>
                    </template>
                    <!--按钮-->
                    <div class="button-style">
                        <el-button size="small" @click="changeCollect">{{isCollect?"已收藏":"收藏"}}
                            <span v-if="collectNum>0">({{collectNum}})</span>
                        </el-button>
                        <el-button size="small" @click="changePraise">{{isPraise?"已赞":"赞"}}
                            <span v-if="praiseNum>0">({{praiseNum}})</span>
                        </el-button>
                        <el-button size="small" @click="changeComment">评论
                            <span v-if="commentNum>0">({{commentNum}})</span>
                        </el-button>
                        <el-button size="small" @click="viewAnalysis">查看解析</el-button>
                        <el-button size="small" type="primary" @click="handleSubmit">提交</el-button>
                    </div>
                </div>
            </div>
        </div>
        <result-model ref="DialogModel" @nextTopic="nextTopic"/>
        <comment-model ref="commentModel"/>
    </div>
</template>

<script>
    import ResultModel from "./ResultModel"; // 查看解析和提交按钮的组件
    import CommentModel from "./CommentModel"; // 评论页面

    export default {
        name: "DoExercise",
        data() {
            return {
                topicTypes:undefined, // 题目类型
                topicClassify:undefined, // 题库分类
                // 需要展示的题目类型
                subjectType:[
                    {type:"isRadio",value:false},
                    {type:"isCheckbox",value:false},
                    {type:"isBlank",value:false},
                    {type:"isAnswer",value:false},
                ], // 需要展示的题目类型
                publishTime:"2021-3-11 16:28",
                authorName:"小明",
                score:10, // 题的分值
                topicTitle:"以下哪一个原则是规定了一个人在正常情况下应该保持应有的谨慎态度？",
                blankTitle:"锦瑟无端五十弦，一弦一柱思华年。_，望帝春心托杜鹃。沧海月明珠有泪，_。_，只是当时已惘然。",
                // 单选题
                optionRadio:[
                    {value:1,label:"吃饭"},
                    {value:2,label:"睡觉"},
                    {value:3,label:"打游戏"},
                ],
               // 多选题
                optionChecked:[
                    {value:1,label:"吃饭"},
                    {value:2,label:"睡觉"},
                    {value:3,label:"打游戏"},
                ],
                // 答案内容
                topicContent:{
                    radioItem:undefined, // 默认选项（单选题）
                    checkedItem:[], // 默认选项（多选题）(必须是空数组形式，否则报错)
                    resultContent:undefined, // 填空题答案
                    answerItem:undefined, // 简答题内容
                },
                collectNum:1, // 收藏数
                isCollect:false, // 是否收藏
                praiseNum:2, // 赞个数
                isPraise:false, // 是否点赞
                // 评论内容
                commentList:[
                    {name:"张三",time:"2020-3-15",comment:"评论内容"},
                    {name:"李四",time:"2020-3-14",comment:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论"},
                    {name:"王五",time:"2020-3-13",comment:"评论数据"},
                ]
            }
        },
        components:{
            ResultModel,
            CommentModel
        },
        mounted(){
            // 从接口中获取数据
            this.getData("isAnswer");
        },
        computed:{
            // 评论数
            commentNum(){
                return this.commentList.length;
            }
        },
        methods:{
            /**
             * @func 获取table列表数据方法
             * @desc 带参函数
             * @param {String} data - 目前是手写的题目类型，等有接口的时候直接取接口数据就行了，就不需要这个参数了
             * */
            // 从接口中获取数据，具体情况根据接口来
            getData(data){
                this.$message.success("成功获取数据");
                // 判断题目类型和题库分类，只能展示一个题目
                this.subjectType.filter(filter => filter.type !== data).forEach(map => {
                    map.value = false;
                });
                this.subjectType.filter(filter => filter.type === data).forEach(map => {
                    map.value = true;
                });
                // 判断题目类型和题库分类
                this.subjectType.filter(filter => filter.value === true).forEach(map => {
                    switch (map.type) {
                        case "isRadio":
                            // 题目类型
                            this.topicTypes = "单选";
                            // 题库分类
                            this.topicClassify = "单选题";
                            break;
                        case "isCheckbox":
                            this.topicTypes = "多选";
                            this.topicClassify = "多选题";
                            break;
                        case "isBlank":
                            this.topicTypes = "填空";
                            this.topicClassify = "填空题";
                            break;
                        case "isAnswer":
                            this.topicTypes = "简答";
                            this.topicClassify = "简答题";
                            break;
                        default:
                            break;
                    }
                });
            },
            // 收藏
            changeCollect(){
                if(this.isCollect){
                    this.collectNum--;
                    this.isCollect = false;
                }else{
                    this.collectNum++;
                    this.isCollect = true;
                }
            },
            // 赞
            changePraise(){
                if(this.isPraise){
                    this.praiseNum--;
                    this.isPraise = false;
                }else{
                    this.praiseNum++;
                    this.isPraise = true;
                }
            },
            // 评论
            changeComment(){
                let record = {
                    title:"评论",
                    commentList:this.commentList,
                };
                this.$refs.commentModel.show(record);
            },
            // 查看解析
            viewAnalysis(){
                let record = {
                    title:"答案解析",
                    isError:false,
                    isResult:false,
                    isAnalysis:true,
                };
                this.$refs.DialogModel.show(record);
            },
            // 提交
            handleSubmit(){
                let record = {
                    title:"答案结果",
                    isError:false, // 结果
                    isResult:true, // 是否显示结果界面
                    isAnalysis:false, // 是否显示解析界面
                };
                this.$refs.DialogModel.show(record);
            },
            // 下一题
            nextTopic(){
                this.$message.success("成功获取下一题");
                this.getData("isBlank");
            },
            // 返回上一页
            previousPage(){
                this.$router.push("/wts/personalCenter");
            }
        }
    }
</script>

<style scoped lang="less">
    .do-exercise{
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #F2F3F5;

        /*返回上一级*/
        .exercise-up-page{
            padding-top: 16px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;;
            line-height: 22px;
            cursor:pointer
        }

        .exercise-center{
            background-color: #FFFFFF;
            height: 396px;
            margin-top: 16px;
            padding-top: 22px;
            /*题目信息*/
            .topic-style{
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                line-height: 22px;
            }
            .topic-information{
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                line-height: 20px;
                padding-top: 8px;
            }
            /*题目内容*/
            .radio-type{
                height: 184px;
                border-top: solid 1px #e6e6e6;
                padding: 15px 40px;
                .el-radio-group{
                    display: block;
                    padding: 5px 15px;
                }
            }
            .checkbox-type{
                height: 184px;
                border-top: solid 1px #e6e6e6;
                padding: 15px 40px;
                .el-checkbox{
                    width: 100%;
                    padding: 5px 15px;
                }
            }
            .blank-type{
                height: 184px;
                border-top: solid 1px #e6e6e6;
                padding: 15px 40px;
            }
            .answer-type{
                height: 184px;
                border-top: solid 1px #e6e6e6;
                padding: 15px 40px;
            }
            /*按钮样式*/
            .button-style{
                display: flex;
                justify-content: center;
                padding-top: 20px;
                border-top: dotted 1px #e6e6e6;
            }
        }
    }
</style>