aurora-admin/frameworks-mobile/DatePicker.vue3.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 setup>
/* 日期选择器（移动端）— 规格 §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）：点选只改本地高亮。 */
import { computed, getCurrentInstance, ref } from 'vue';

const props = defineProps({
  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: () => [] },
  months: { type: Array, default: () => [] },
  days: { type: Array, default: () => [] }
});
const emit = defineEmits(['confirm', 'close']);

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

/* 面板标题元素 id：取当前实例 uid，保证同页多实例不撞号（不依赖 Vue 3.5 才有的 useId） */
const titleId = 'kole-m-datepicker-title-' + getCurrentInstance().uid;

/* value 形如 YYYY-MM-DD；mode=month 时只有 YYYY-MM，day 为空串 */
function partsOf(value) {
  const 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;
  const digits = String(option).match(/[0-9]+/);
  if (digits) return String(Number(digits[0])) === String(Number(part));
  return String(option) === String(part);
}

/* null = 跟随 value 属性；点选后本地记账，确认前不改宿主的值 */
const draft = ref(null);
const picked = computed(() => draft.value || partsOf(props.value));
const title = computed(() => (props.mode === 'month' ? '选择月份' : '选择日期'));
const label = computed(() => (props.value ? title.value + '：' + props.value : title.value));

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

const panelClass = computed(() => [
  props.round ? 'kole-m-datepicker--round' : '',
  props.open ? 'is-open' : ''
].filter(Boolean));

function isSelected(key, option) {
  return sameValue(option, picked.value[key]);
}

function select(key, option) {
  draft.value = Object.assign({}, picked.value, { [key]: String(option) });
}

function onMaskClick() {
  if (!props.closeOnMask) return;
  emit('close');
}

function onCancelClick() {
  emit('close');
}

function onConfirmClick() {
  emit('confirm');
}
</script>

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