aurora-admin/frameworks-mobile/DatePicker.vue2.vue

<template>
  <div>
    <slot></slot>
    <div
      class="kole-m-datepicker__mask"
      :class="{ 'is-open': open }"
      aria-hidden="true"
      @click="onMaskClick"
    ></div>
    <div
      class="kole-m-datepicker"
      :class="panelClass"
      role="dialog"
      aria-modal="true"
      :aria-labelledby="titleId"
      :aria-hidden="open ? null : 'true'"
    >
      <div class="kole-m-datepicker__header">
        <button class="kole-m-datepicker__btn" type="button" @click="onCancelClick">取消</button>
        <span class="kole-m-datepicker__title" :id="titleId">{{ label }}</span>
        <button
          class="kole-m-datepicker__btn kole-m-datepicker__btn--confirm"
          type="button"
          @click="onConfirmClick"
        >确定</button>
      </div>
      <div class="kole-m-datepicker__columns">
        <ul
          v-for="col in columns"
          :key="col.key"
          class="kole-m-datepicker__column"
          role="listbox"
          :aria-label="col.label"
        >
          <li
            v-for="(option, i) in col.options"
            :key="col.key + '-' + i"
            class="kole-m-datepicker__option"
            :class="{ 'is-selected': isSelected(col.key, option) }"
            role="option"
            :aria-selected="isSelected(col.key, option) ? 'true' : 'false'"
            @click="select(col.key, option)"
          >{{ option }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
/* 日期选择器（移动端）— 规格 §18。
   底部浮层 = 装饰性遮罩（aria-hidden）+ 面板；遮罩点击关闭，closeOnMask=false 时不关（规格 §18.5）。
   面板 role="dialog" + aria-modal="true"，标题元素 id 由 aria-labelledby 指向（规格 §18.6）。
   每列 role="listbox"、选项 role="option" + aria-selected；is-selected 与 aria-selected 同步
   （选中值以 YYYY-MM-DD 文本呈现：value 直接消费，不依赖视觉滚动位置）。
   本端不发明选择事件（契约只有 confirm / close）：点选只改本地高亮。 */

var COLUMN_LABELS = { year: '年', month: '月', day: '日' };

/* 面板标题元素 id 的自增种子：同页多实例不撞号（不依赖内部实例字段） */
var titleSeed = 0;

/* value 形如 YYYY-MM-DD；mode=month 时只有 YYYY-MM，day 为空串 */
function partsOf(value) {
  var seg = String(value || '').split('-');
  return { year: seg[0] || '', month: seg[1] || '', day: seg[2] || '' };
}

/* 选项文字可能带单位（「9 月」），取首个数字段比较；纯符号选项退回逐字比较 */
function sameValue(option, part) {
  if (part === undefined || part === null || part === '') return false;
  var digits = String(option).match(/[0-9]+/);
  if (digits) return String(Number(digits[0])) === String(Number(part));
  return String(option) === String(part);
}

/* mode=date → 年/月/日 三列；mode=month → 年/月 两列（规格 §18.3） */
function columnsOf(mode, years, months, days) {
  var cols = [
    { key: 'year', label: COLUMN_LABELS.year, options: years },
    { key: 'month', label: COLUMN_LABELS.month, options: months }
  ];
  if (mode !== 'month') cols.push({ key: 'day', label: COLUMN_LABELS.day, options: days });
  return cols;
}

export default {
  name: 'KoleMDatePicker',
  props: {
    mode: { type: String, default: 'date' },
    round: { type: Boolean, default: false },
    open: { type: Boolean, default: false },
    closeOnMask: { type: Boolean, default: true },
    value: { type: String, default: '' },
    years: { type: Array, default: function () { return []; } },
    months: { type: Array, default: function () { return []; } },
    days: { type: Array, default: function () { return []; } }
  },
  data: function () {
    /* 每个实例占一个号，标题 id 因此唯一（aria-labelledby 指向它） */
    titleSeed += 1;
    return {
      instanceId: titleSeed,
      /* null = 跟随 value 属性；点选后本地记账，确认前不改宿主的值 */
      draft: null
    };
  },
  computed: {
    titleId: function () {
      return 'kole-m-datepicker-title-' + this.instanceId;
    },
    title: function () {
      return this.mode === 'month' ? '选择月份' : '选择日期';
    },
    label: function () {
      return this.value ? this.title + '：' + this.value : this.title;
    },
    columns: function () {
      return columnsOf(this.mode, this.years, this.months, this.days);
    },
    picked: function () {
      return this.draft || partsOf(this.value);
    },
    panelClass: function () {
      return [
        this.round ? 'kole-m-datepicker--round' : '',
        this.open ? 'is-open' : ''
      ].filter(Boolean);
    }
  },
  methods: {
    isSelected: function (key, option) {
      return sameValue(option, this.picked[key]);
    },
    select: function (key, option) {
      var next = partsOf(this.value);
      next.year = this.picked.year;
      next.month = this.picked.month;
      next.day = this.picked.day;
      next[key] = String(option);
      this.draft = next;
    },
    onMaskClick: function () {
      if (!this.closeOnMask) return;
      this.$emit('close');
    },
    onCancelClick: function () {
      this.$emit('close');
    },
    onConfirmClick: function () {
      this.$emit('confirm');
    }
  }
};
</script>

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