تقييم Rate

تقييم بالنجوم. يدعم max كحد أقصى لعدد النجوم، وallowHalf لنصف نجمة، وcharacter لحرف مخصّص، والقراءة فقط والتعطيل، وshowScore لنص الدرجة (قالب scoreTemplate).

تقييم

<template>
  <div class="demo-col" style="gap: 22px">
    <div>
      <LhRate v-model="score" :max="5" show-score score-template="{n} نجمة" />
      <p class="demo-note">القيمة المتحكَّم بها: {{ score }} (showScore + scoreTemplate="{n} نجمة")</p>
    </div>
    <div>
      <LhRate v-model="half" :max="5" allow-half />
      <p class="demo-note">allowHalf يسمح بنصف نجمة: {{ half }}</p>
    </div>
    <div>
      <LhRate v-model="custom" :max="5" character="◈" />
      <p class="demo-note">character="◈" حرف مخصّص</p>
    </div>
    <div>
      <LhRate :model-value="3.5" :max="5" readonly />
      <p class="demo-note">readonly للقراءة فقط (role="img"، يقرأ قارئ الشاشة نص النجوم)</p>
    </div>
    <div>
      <LhRate v-model="score" :max="5" disabled />
      <p class="demo-note">disabled معطّل</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ score: 3, half: 2.5, custom: 4 }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
v-model	التقييم الحالي (model: modelValue/input)	number	—
max	الحد الأقصى لعدد النجوم	number	5
allowHalf	السماح بنصف نجمة	boolean	false
readonly	للقراءة فقط (يخرج نص النجوم لقارئ الشاشة)	boolean	false
disabled	تعطيل	boolean	false
character	حرف مخصّص (★ افتراضياً)	string	'★'
showScore	إظهار نص الدرجة	boolean	false
scoreTemplate	قالب الدرجة (عنصر {n} النائب)	string	'{n}'
sx	خصائص تخطيط سريعة عبر sx	—	—

Events

حدث	الوصف	معامل الاستدعاء
input	حدث v-model	(val)
change	يُطلق عند تغيّر التقييم	(val)

إمكانية الوصول

في الحالة التفاعلية يكون role="radiogroup"، وكل نجمة role="radio" + aria-checked؛ وفي حالة readonly يكون role="img" + aria-label يحمل نص النجوم؛ ويتم اختيار النجوم بلوحة المفاتيح عبر ←/→.