vue实现答题卡页面_vue实现答题组件,主要功能,1答题卡,显示题目数量及答题状态;2上一题和下一题;3点

样式如下

需要注意的点

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

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

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

.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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/*题目内容*/
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

需要注意的是： 在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328