92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<div class="question">
|
|
<div class="ql-editor" v-html="appendIndex($escapeHTML(`${option.topic}`), $vnode.key)" />
|
|
<template v-if="checkType(option, 'judge')">
|
|
<el-radio-group v-model="answer" @change="onChnage">
|
|
<el-radio v-for="(el,i) in option.optionList" :key="i" :label="$str2number(el.id)" style="display: inline">
|
|
<span>{{ el.content }}</span>
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</template>
|
|
<template v-else-if="checkType(option, 'select')">
|
|
<el-radio-group v-model="answer" @change="onChnage">
|
|
<el-radio v-for="(el,i) in option.optionList" :key="i" :label="$str2number(el.id)" style="display: block">
|
|
<span>{{ $asc2chart(i+65) }}. </span>
|
|
<div class="ql-editor" style="display: inline; padding: 0" v-html="$escapeHTML(el.content)" />
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
option: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
answer: 0
|
|
};
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
this.changeValue();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.changeValue();
|
|
},
|
|
methods: {
|
|
changeValue() {
|
|
this.answer = parseInt(this.value);
|
|
},
|
|
checkType(option, type) {
|
|
return option.type == type;
|
|
},
|
|
appendIndex(str, index) {
|
|
return `${index + 1}. ${str}`;
|
|
},
|
|
onChnage(e) {
|
|
const answer = `${e}`;
|
|
this.$emit('input', answer);
|
|
this.$emit('save', {userExamQuestionId: this.option.id, answer: answer});
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.rich-text {
|
|
padding: 0;
|
|
display: inline;
|
|
}
|
|
|
|
.question {
|
|
/deep/ {
|
|
.ql-editor {
|
|
line-height: 26px;
|
|
padding: 0;
|
|
}
|
|
|
|
.el-radio {
|
|
color: #000;
|
|
}
|
|
|
|
.el-radio__label {
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|