exam_mp/components/Topic/Questions.vue

<template>
  <view
    class="question-item"
    :class="{
      'question-item-selected':
        question.checked && !props.showResult && styleCount !== 6,
      'question-item-correct':
        question.checked &&
        props.showResult &&
        question.isRight &&
        styleCount !== 6,
      'question-item-wrong':
        question.checked &&
        props.showResult &&
        !question.isRight &&
        styleCount !== 6,
    }"
    :style="{
      border: styleCount !== 6 ? '1px solid #ccc' : 0,
      padding: styleCount !== 6 ? '28rpx;' : 0,
    }"
    @tap="handleClick"
  >
    <view
      class="option-label"
      :class="{
        'option-label-selected': question.checked && !props.showResult,
        'option-label-correct':
          question.checked && props.showResult && question.isRight,
        'option-label-wrong':
          question.checked && props.showResult && !question.isRight,
      }"
    >
      {{ question.value }}
    </view>
    <uvParse
      :content="replaceImageDimensions(question.label)"
      class="option-text"
    ></uvParse>
    <view
      class="option-icon"
      v-if="
        question.checked &&
        props.showResult &&
        !question.isRight &&
        styleCount !== 6
      "
    >
      <uni-icons type="closeempty" color="#f00"></uni-icons>
    </view>
    <view
      class="option-icon"
      v-if="
        question.checked &&
        props.showResult &&
        question.isRight &&
        styleCount !== 6
      "
    >
      <uni-icons type="checkmarkempty" color="#00be00"></uni-icons>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import uvParse from "../../uni_modules/uv-parse/components/uv-parse/uv-parse.vue";
// Props 定义
const props = defineProps({
  answerList: {
    type: Array,
    default: () => [],
  },
  selectCount: {
    type: Array,
    default: () => [],
  },
  question: {
    type: Object,
    required: true,
    default: () => ({
      label: "",
      value: 0,
      checked: false,
    }),
  },
  parindex: {
    type: Number,
    required: true,
  },
  showResult: {
    type: Boolean,
    default: false,
  },
  styleCount: Number,
});

// Emits 定义
const emit = defineEmits(["select"]);

const replaceImageDimensions = (str) => {
  // 将图片宽度设为100%
  str = str
    .replace(
      /<img([^>]*?)src="([^"]*?)"([^>]*?)\/?>/g,
      '<img$1src="$2"$3 style="width:100%;height:100%;"/>'
    )
    .replace(
      /<img([^>]*?)style="([^"]*?)width:\s*[^;]+;\s*height:\s*[^;]+;([^"]*?)"([^>]*?)\/?>/g,
      '<img$1style="$2width:100%;height:100%;$3"$4/>'
    )
    .replace(
      /<img([^>]*?)width="[^"]*"([^>]*?)height="[^"]*"([^>]*?)\/?>/g,
      '<img$1width="100%"$2height="100%"$3/>'
    );
  console.log(str);

  return str;
};

// 方法
const handleClick = () => {
  if (props.showResult) return;
  emit("select", {
    ...props.question,
    pid: props.parindex,
    style: props.styleCount,
  });
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.question-item {
  display: flex;
  border-radius: 8px;
  background-color: #fafbfd;
  gap: 12px;
  align-items: center;
  color: #333;
}

.question-item-correct {
  border-color: $success;
  background-color: #e8f5e9;
}

.question-item-wrong {
  border-color: $error;
  background-color: #ffebee;
}

.question-item-selected {
  border-color: $uni-primary;
  background-color: #e3f2fd;
}

.option-label {
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 0 5px;
}

.option-label-correct {
  border-color: $success;
  background-color: $success;
  color: #fff;
}

.option-label-wrong {
  border-color: $error;
  background-color: $error;
  color: #fff;
}

.option-label-selected {
  border-color: $uni-primary;
  background-color: $uni-primary;
  color: #fff;
}

.option-text {
  flex: 1;
  white-space: normal;
}
</style>