panduan.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <view class="phone-panduan-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. <radio-group @change="radioChange" class="panduan-option-box">
  10. <label class="option-question" :class="formatClass('1')">
  11. <radio value="1" :disabled="showError" :checked="question.reply == '1'"/>
  12. <view>正确</view>
  13. </label>
  14. <label class="option-question" :class="formatClass('0')">
  15. <radio value="0" :disabled="showError" :checked="question.reply == '0'"/>
  16. <view>错误</view>
  17. </label>
  18. </radio-group>
  19. </view>
  20. </template>
  21. <script setup>
  22. const props = defineProps({
  23. question: {
  24. type: Object,
  25. },
  26. showError: {
  27. type: Boolean,
  28. default: false
  29. }
  30. })
  31. function radioChange(e) {
  32. if (props.showError) {
  33. return;
  34. }
  35. props.question.reply = e.detail.value;
  36. }
  37. function formatClass(index) {
  38. if (props.showError) {
  39. return {
  40. active_right: props.question.result == index,
  41. showError: props.question.reply == index && props.question.result != index
  42. }
  43. } else {
  44. return {
  45. active: props.question.reply == index
  46. }
  47. }
  48. }
  49. </script>