panduan.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <view class="ezy-panduan-box">
  3. <!-- 标题区域 -->
  4. <view class="panduan-title"></view>
  5. <!-- 题干区域 -->
  6. <rich-text :nodes="question.name" class="ezy-shiti-question"></rich-text>
  7. <!-- 选项区域 -->
  8. <radio-group @change="radioChange" class="danxuan-option-box">
  9. <label class="option-question" :class="formatClass('1')">
  10. <radio value="1" :checked="question.reply == '1'"/>
  11. <view>正确</view>
  12. </label>
  13. <label class="option-question" :class="formatClass('0')">
  14. <radio value="0" :checked="question.reply == '0'"/>
  15. <view>错误</view>
  16. </label>
  17. </radio-group>
  18. </view>
  19. </template>
  20. <script setup>
  21. const props = defineProps({
  22. question: {
  23. type: Object,
  24. },
  25. showError: {
  26. type: Boolean,
  27. default: false
  28. }
  29. })
  30. function radioChange(e) {
  31. if (props.showError) {
  32. return;
  33. }
  34. props.question.reply = e.detail.value;
  35. }
  36. function formatClass(index) {
  37. if (props.showError) {
  38. return {
  39. active_right: props.question.result == index,
  40. showError: props.question.reply == index && props.question.result != index
  41. }
  42. } else {
  43. return {
  44. active: props.question.reply == index
  45. }
  46. }
  47. }
  48. </script>