| 1 | <template> |
| 2 | <n-tag :type="gradeType" :bordered="false" round :size> |
| 3 | {{ grade }} |
| 4 | </n-tag> |
| 5 | </template> |
| 6 | |
| 7 | <script setup lang="ts"> |
| 8 | import type { TagSize } from "naive-ui" |
| 9 | import { NTag } from "naive-ui" |
| 10 | import { computed } from "vue" |
| 11 | |
| 12 | const props = defineProps<{ |
| 13 | grade: string |
| 14 | size?: TagSize |
| 15 | score?: number |
| 16 | }>() |
| 17 | |
| 18 | const gradeType = computed(() => { |
| 19 | switch (props.grade) { |
| 20 | case "A": |
| 21 | case "A+": |
| 22 | return "success" |
| 23 | case "B": |
| 24 | case "B+": |
| 25 | return "info" |
| 26 | case "C": |
| 27 | case "C+": |
| 28 | return "warning" |
| 29 | case "D": |
| 30 | case "D+": |
| 31 | case "F": |
| 32 | return "error" |
| 33 | default: |
| 34 | return "default" |
| 35 | } |
| 36 | }) |
| 37 | </script> |