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

export default {
  name: 'KoleMRate',
  props: {
    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: '评分' }
  },
  computed: {
    starIndexes: function () {
      var out = [];
      for (var i = 0; i < this.max; i++) out.push(i);
      return out;
    },
    rateClass: function () {
      return [
        this.allowHalf ? 'kole-m-rate--half' : '',
        this.size === 'small' ? 'kole-m-rate--small' : '',
        this.readonly ? 'kole-m-rate--readonly' : '',
        this.disabled ? 'is-disabled' : ''
      ].filter(Boolean);
    }
  },
  methods: {
    ratioOf: function (i) {
      return Math.max(0, Math.min(1, this.value - i));
    },
    pick: function (i, e) {
      if (this.readonly || this.disabled) return;
      /* 半星判定：点在左半区取 N-0.5，右半区取 N（整星模式下位置不影响取值） */
      var el = e.target && e.target.getAttribute ? e.target : null;
      var isLeftHalf = this.allowHalf && el && el.getAttribute('data-half') === 'left';
      var index = i + 1;
      this.$emit('change', isLeftHalf ? index - 0.5 : index);
    },
    onKeyDown: function (e) {
      if (this.readonly || this.disabled) return;
      var delta =
        e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -1 : e.key === 'ArrowRight' || e.key === 'ArrowUp' ? 1 : 0;
      if (!delta) return;
      e.preventDefault();
      var stepValue = this.allowHalf ? 0.5 : 1;
      var min = this.allowHalf ? 0.5 : 1;
      var next = Math.round((this.value + delta * stepValue) * 2) / 2;
      this.$emit('change', Math.max(min, Math.min(this.max, next)));
    }
  }
};
</script>

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