Rating (评分)

<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(3)
</script>

<template>
  <div class="flex items-center gap-3">
    <KunRating v-model="rating" />
    <span class="text-default-500 text-sm">{{ rating }} / 5</span>
  </div>
</template>

<template>
  <div class="flex items-center gap-3">
    <KunRating :model-value="4" readonly />
    <span class="text-default-500 text-sm">只读，固定为 4 / 5</span>
  </div>
</template>

<template>
  <div class="flex items-center gap-3">
    <KunRating :model-value="3" disabled />
    <span class="text-default-500 text-sm">禁用，无法交互</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(7)
</script>

<template>
  <div class="flex items-center gap-3">
    <KunRating v-model="rating" :max="10" />
    <span class="text-default-500 text-sm">{{ rating }} / 10</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const sm = ref(3)
const md = ref(3)
const lg = ref(3)
</script>

<template>
  <div class="flex flex-col gap-3">
    <KunRating v-model="sm" size="sm" />
    <KunRating v-model="md" size="md" />
    <KunRating v-model="lg" size="lg" />
  </div>
</template>