北斗应用技术培训考试题库

src/components/topic/radio.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-text style="font-weight: bold">
+    难度：{{
+      topic.difficulty == "0" ? "简单" : topic.difficulty == "1" ? "普通" : "困难"
+    }}
+  </el-text>
+  <br />
+  <br />
+  <el-text style="font-weight: bold"> 题目：{{ topic.stem }} </el-text>
+  <br />
+  <el-radio-group v-model="radio" class="flex flex-col">
+    <div class="w-full">
+      <el-radio value="a" style="margin-right: 0px"> A：{{ topic.options_a }} </el-radio>
+    </div>
+    <div class="w-full">
+      <el-radio value="b" style="margin-right: 0px"> B：{{ topic.options_b }} </el-radio>
+    </div>
+    <div class="w-full">
+      <el-radio value="c" style="margin-right: 0px"> C：{{ topic.options_c }} </el-radio>
+    </div>
+    <div class="w-full">
+      <el-radio value="d" style="margin-right: 0px"> D：{{ topic.options_d }} </el-radio>
+    </div>
+  </el-radio-group>
+  <br />
+  <el-text v-show="checked ? true : showAnswer" style="font-weight: bold">
+    答案：{{ topic.answer }}
+  </el-text>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({ topic: Array, checked: Boolean });
+
+const radio = ref("");
+const showAnswer = ref(false);
+
+const reset = () => {
+  radio.value = "";
+  showAnswer.value = false;
+};
+
+defineExpose({ reset });
+
+watch(radio, (value) => {
+  showAnswer.value = false;
+  if (value != "") {
+    showAnswer.value = true;
+  }
+});
+</script>
+
+<style scoped></style>