一个根据题目类型显示不同答题界面的答题组件，题目内容以及类型由外部参数传入，给我具体的elementui和vue2的代码

我可以为您提供一个基于ElementUI和Vue2的答题组件的示例代码：<template>
<div class="question">
<el-row :gutter="20">
<el-col :span="24">
<el-card>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="题目">
<el-input v-model="form.question" disabled></el-input>
</el-form-item>
<el-form-item v-if="type === 'single'" label="选项">
<el-radio-group v-model="form.selectedOption" :disabled="form.disabled">
<el-radio v-for="(option, index) in form.options" :key="index" :label="option.key">{{ option.value }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="type === 'multiple'" label="选项">
<el-checkbox-group v-model="form.selectedOption" :disabled="form.disabled">
<el-checkbox v-for="(option, index) in form.options" :key="index" :label="option.key">{{ option.value }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitAnswer">提交答案</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
</div>
</template><script>
export default {
data() {
return {
form: {
question: '',
options: [],
selectedOption: [],
disabled: false
},
type: ''
}
},
props: {
questionData: {
type: Object
}
},
watch: {
questionData: {
handler(val) {
if (val) {
this.form.question = val.question
this.form.options = val.options
this.type = val.type
}
}
}
},
methods: {
submitAnswer () {
this.form.disabled = true
this.$emit('submitAnswer', {
selectedOption: this.form.selectedOption
})
}
}
}
</script>