panduan.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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. const emits = defineEmits(['change'])
  32. function radioChange(e) {
  33. if (props.showError) {
  34. return;
  35. }
  36. props.question.reply = e.detail.value;
  37. emits('change')
  38. }
  39. function formatClass(index) {
  40. if (props.showError) {
  41. return {
  42. active_right: props.question.result == index,
  43. showError: props.question.reply == index && props.question.result != index
  44. }
  45. } else {
  46. return {
  47. active: props.question.reply == index
  48. }
  49. }
  50. }
  51. </script>