样式如下
需要注意的点
实现题目内容的最外层即循环题目数据的位置谨慎使用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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
