tiankong.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <view v-if="question" class="phone-tiankong-box">
  3. <view class="phone-shiti-question">
  4. <view class="question-num">{{question.onlyNum}}、</view>
  5. <!-- 题干区域 -->
  6. <rich-text :nodes="question.name"></rich-text>
  7. </view>
  8. <!-- 选项区域 -->
  9. <view v-for="(item,index) in question.reply" class="tiankong-option-box" :key="index" :class="formatClass(index)">
  10. <text class="option-question">填空{{index+1}}:</text>
  11. <input type="text" v-model="question.reply[index]" class="option-question-text" :placeholder="`请输入填空${index+1}答案`">
  12. </view>
  13. </view>
  14. </template>
  15. <script setup>
  16. const props = defineProps({
  17. question: {
  18. type: Object,
  19. },
  20. showError: {
  21. type: Boolean,
  22. default: false
  23. }
  24. })
  25. function formatClass(index) {
  26. if (props.showError) {
  27. return {
  28. active_right: props.question.result[index].some(item => item == props.question.reply[index]?props.question.reply[index].trim(): ''),
  29. showError: !props.question.result[index].some(item => item == props.question.reply[index]?props.question.reply[index].trim(): '')
  30. }
  31. }
  32. }
  33. </script>