109 lines
3.2 KiB
Vue
109 lines
3.2 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" style="margin-bottom: 5px;">
|
||
<div>{{ `第${i + 1}空` }}</div>
|
||
<item-rich v-model="el.value" :remove="i>0" @modify="doModify(el)" @remove="doRemove(i)" />
|
||
</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>
|
||
import ItemRich from './item-rich';
|
||
export default {
|
||
components: {
|
||
ItemRich
|
||
},
|
||
props: {
|
||
optionList: {
|
||
type: Array,
|
||
required: true
|
||
},
|
||
type: {
|
||
type: String,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
active: 0,
|
||
activeList: [],
|
||
answer: '',
|
||
answerList: [{value: ''}]
|
||
};
|
||
},
|
||
watch: {
|
||
optionList(val) {
|
||
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({value: el.content});
|
||
});
|
||
} else if (this.type === 'answer') {
|
||
this.answer = (this.optionList[0] || {content: ''}).content;
|
||
}
|
||
}
|
||
// answerList: {
|
||
// handler(val) {
|
||
// this.onChange(val);
|
||
// },
|
||
// deep: true
|
||
// }
|
||
},
|
||
methods: {
|
||
onChange(e) {
|
||
this.$emit('change', e);
|
||
},
|
||
doAppend() {
|
||
this.answerList.push({value: ''});
|
||
},
|
||
doModify(el) {
|
||
this.$emit('modify', {model: el, prop: 'value'});
|
||
console.log('-----------', this.answerList);
|
||
},
|
||
doRemove(index) {
|
||
this.answerList.splice(index, 1);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
</style>
|