131 lines
3.8 KiB
Vue
131 lines
3.8 KiB
Vue
<template>
|
||
<div>
|
||
<template v-if="type=='select'">
|
||
<el-radio-group v-model="active" @change="onChange">
|
||
<el-radio v-for="(el,i) in optionList" :key="i" :label="i"> 选项-{{ $asc2chart(65+i) }} </el-radio>
|
||
</el-radio-group>
|
||
</template>
|
||
<template v-if="type=='judge'">
|
||
<el-radio-group v-model="active" @change="onChange">
|
||
<el-radio :label="0"> √ </el-radio>
|
||
<el-radio :label="1"> × </el-radio>
|
||
</el-radio-group>
|
||
</template>
|
||
<template v-if="type=='multi'">
|
||
<el-checkbox-group v-model="activeList" @change="onChange">
|
||
<el-checkbox v-for="(el,i) in optionList" :key="i" :label="i"> 选项-{{ $asc2chart(65+i) }} </el-checkbox>
|
||
</el-checkbox-group>
|
||
</template>
|
||
<template v-if="type==='fill'">
|
||
<div v-for="(el, i) in answerList" :key="i" class="fillType">
|
||
<div class="fillTypeName">{{ `第${i + 1}空` }}</div>
|
||
<el-input
|
||
v-model="answerList[i]"
|
||
class="fillTypeInput"
|
||
type="textarea"
|
||
:autosize="{ minRows: 1, maxRows: 4}"
|
||
placeholder="请输入答案"
|
||
@change="onChange"
|
||
/>
|
||
<div class="fillTypeBtn">
|
||
<el-button v-if="i>0" class="item__button" type="danger" size="mini" icon="el-icon-delete" circle @click="doRemove(i)" />
|
||
</div>
|
||
</div>
|
||
<el-button class="item__button" type="primary" size="mini" icon="el-icon-plus" @click="doAppend" />
|
||
</template>
|
||
<template v-if="type==='answer'">
|
||
<el-input
|
||
v-model="answer"
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 4}"
|
||
placeholder="请输入答案"
|
||
@change="onChange"
|
||
/>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
optionList: {
|
||
type: Array,
|
||
required: true
|
||
},
|
||
type: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
active: 0,
|
||
activeList: [],
|
||
answer: '',
|
||
answerList: ['']
|
||
};
|
||
},
|
||
watch: {
|
||
optionList: {
|
||
deep:true,
|
||
handler:function(newV, oldV) {
|
||
if (this.type === 'judge' || this.type === 'select') {
|
||
this.active = this.optionList.findIndex(ele => ele.correct);
|
||
} else if (this.type === 'multi') {
|
||
this.activeList = [];
|
||
this.optionList.forEach((el, i) => {
|
||
if (el.correct) {
|
||
this.activeList.push(i);
|
||
}
|
||
});
|
||
} else if (this.type === 'fill') {
|
||
this.answerList = [];
|
||
this.optionList.forEach(el => {
|
||
this.answerList.push(el.content);
|
||
});
|
||
} else if (this.type === 'answer') {
|
||
this.answer = (this.optionList[0] || {content: ''}).content;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
onChange(e) {
|
||
if (this.type === 'fill') {
|
||
this.$emit('change', this.answerList);
|
||
} else {
|
||
this.$emit('change', e);
|
||
}
|
||
},
|
||
doAppend() {
|
||
this.answerList.push('');
|
||
},
|
||
doModify(el) {
|
||
this.$emit('modify', {model: el, prop: 'value'});
|
||
},
|
||
doRemove(index) {
|
||
this.answerList.splice(index, 1);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.fillType{
|
||
margin-bottom:10px;display:flex;
|
||
}
|
||
.fillTypeName{
|
||
margin-right: 10px;height:33px; line-height:33px;
|
||
}
|
||
.fillTypeInput{
|
||
flex:1;
|
||
}
|
||
.fillTypeBtn{
|
||
margin-left: 10px;width: 33px;height:33px;
|
||
button{
|
||
vertical-align: top;
|
||
margin-top:2px;
|
||
}
|
||
}
|
||
</style>
|