aurora-admin/frameworks-mobile/Rate.vue3.vue

<template>
  <!-- 只读形态：整组是一个 role="img"，名称由 aria-label 播报（不留下可聚焦的星） -->
  <div
    v-if="readonly"
    class="kole-m-rate"
    :class="rateClass"
    role="img"
    :aria-label="`${label} ${value} 分（满分 ${max} 分）`"
  >
    <span class="kole-m-rate__stars" aria-hidden="true">
      <span v-for="(i, k) in starIndexes" :key="k" class="kole-m-rate__star">
        <span class="kole-m-rate__glyph">
          <span class="kole-m-rate__base">★</span>
          <span class="kole-m-rate__fill" :style="{ width: ratioOf(i) * 100 + '%' }">★</span>
        </span>
      </span>
    </span>
    <slot>
      <span class="kole-m-rate__text">{{ value }} 分</span>
    </slot>
  </div>

  <div
    v-else
    class="kole-m-rate"
    :class="rateClass"
    role="radiogroup"
    :aria-label="label"
    :aria-disabled="disabled ? 'true' : null"
    @keydown="onKeyDown"
  >
    <span class="kole-m-rate__stars">
      <button
        v-for="(i, k) in starIndexes"
        :key="k"
        class="kole-m-rate__star"
        type="button"
        role="radio"
        :aria-checked="ratioOf(i) >= 1 ? 'true' : 'false'"
        :aria-label="(i + 1) + ' 星'"
        :disabled="disabled"
        @click="pick(i, $event)"
      >
        <span class="kole-m-rate__glyph" aria-hidden="true">
          <span class="kole-m-rate__base">★</span>
          <span class="kole-m-rate__fill" :style="{ width: ratioOf(i) * 100 + '%' }">★</span>
        </span>
        <template v-if="allowHalf">
          <span class="kole-m-rate__half kole-m-rate__half--left" data-half="left"></span>
          <span class="kole-m-rate__half kole-m-rate__half--right" data-half="right"></span>
        </template>
      </button>
    </span>
    <slot>
      <span class="kole-m-rate__text">{{ value }} 分</span>
    </slot>
  </div>
</template>

<script setup>
/* 评分（移动端）— 规格 §36
   点第 N 颗星取 N 分；allowHalf=true 时点某颗星的左半取 N-0.5 分（规则见规格 §36.5）。
   触屏上没有鼠标悬停预览，所以「已选中的部分」靠填充比例表达（半星 = 左半填充），
   不能只靠颜色深浅；星形本体视觉 24px，热区撑到 44px 高。
   readonly=true 时是纯展示（用 role="img" + aria-label 播报「N 分（满分 M 分）」），
   此时不渲染任何可聚焦控件 —— 列表里一行一个评分不该抢走键盘序列。 */
import { computed } from 'vue';

const props = defineProps({
  value: { type: Number, default: 0 },
  max: { type: Number, default: 5 },
  allowHalf: { type: Boolean, default: false },
  size: { type: String, default: 'default' },
  readonly: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  label: { type: String, default: '评分' }
});
const emit = defineEmits(['change']);

const starIndexes = computed(() => Array.from({ length: props.max }, (_, i) => i));

const rateClass = computed(() => [
  props.allowHalf ? 'kole-m-rate--half' : '',
  props.size === 'small' ? 'kole-m-rate--small' : '',
  props.readonly ? 'kole-m-rate--readonly' : '',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

function ratioOf(i) {
  return Math.max(0, Math.min(1, props.value - i));
}
function pick(i, e) {
  if (props.readonly || props.disabled) return;
  /* 半星判定：点在左半区取 N-0.5，右半区取 N（整星模式下位置不影响取值） */
  const el = e.target && e.target.getAttribute ? e.target : null;
  const isLeftHalf = props.allowHalf && el && el.getAttribute('data-half') === 'left';
  const index = i + 1;
  emit('change', isLeftHalf ? index - 0.5 : index);
}
function onKeyDown(e) {
  if (props.readonly || props.disabled) return;
  const delta = e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -1 : e.key === 'ArrowRight' || e.key === 'ArrowUp' ? 1 : 0;
  if (!delta) return;
  e.preventDefault();
  const stepValue = props.allowHalf ? 0.5 : 1;
  const min = props.allowHalf ? 0.5 : 1;
  const next = Math.round((props.value + delta * stepValue) * 2) / 2;
  emit('change', Math.max(min, Math.min(props.max, next)));
}
</script>

<style src="./Rate.css"></style>