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

<template>
  <div>
    <slot></slot>
    <div
      class="kole-m-picker__mask"
      :class="{ 'is-open': open }"
      aria-hidden="true"
      @click="onMaskClick"
    ></div>
    <div
      class="kole-m-picker"
      :class="panelClass"
      role="dialog"
      aria-modal="true"
      :aria-labelledby="titleId"
      :aria-hidden="open ? null : 'true'"
    >
      <div class="kole-m-picker__header">
        <button class="kole-m-picker__btn" type="button" @click="onCancelClick">取消</button>
        <span class="kole-m-picker__title" :id="titleId">{{ label }}</span>
        <button
          class="kole-m-picker__btn kole-m-picker__btn--confirm"
          type="button"
          @click="onConfirmClick"
        >确定</button>
      </div>
      <div class="kole-m-picker__columns">
        <ul
          v-for="(col, ci) in cols"
          :key="col.key || ci"
          class="kole-m-picker__column"
          role="listbox"
          :aria-label="col.label"
        >
          <li
            v-for="(option, i) in col.options || []"
            :key="labelOf(option) + '-' + i"
            class="kole-m-picker__option"
            :class="{ 'is-selected': isSelected(ci, option), 'is-disabled': isOff(option) }"
            role="option"
            :aria-selected="isSelected(ci, option) ? 'true' : 'false'"
            :aria-disabled="isOff(option) ? 'true' : null"
            @click="select(ci, option)"
          >{{ labelOf(option) }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
/* 选择器（移动端）— 规格 §43。
   底部浮层 = 装饰性遮罩（aria-hidden）+ 面板；遮罩点击关闭，closeOnMask=false 时不关（规格 §43.5）。
   面板 role="dialog" + aria-modal="true"，标题元素 id 由 aria-labelledby 指向（规格 §43.6）。
   每列 role="listbox"、选项 role="option" + aria-selected；is-selected 与 aria-selected 同步。
   mode=single 一列、mode=multiple 多列（各列独立选中，是否联动由宿主给的选项决定）。
   本端不发明选择事件（契约只有 confirm / close）：点选只改本地高亮。 */
import { computed, getCurrentInstance, ref } from 'vue';

const props = defineProps({
  mode: { type: String, default: 'single' },
  round: { type: Boolean, default: false },
  open: { type: Boolean, default: false },
  closeOnMask: { type: Boolean, default: true },
  value: { type: Array, default: () => [] },
  columns: { type: Array, default: () => [] },
  disabled: { type: Boolean, default: false },
  title: { type: String, default: '' }
});
const emit = defineEmits(['confirm', 'close']);

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

/* 选项可能是字符串，也可能是 { label, value, disabled } 对象（规格 §43.7 只允许宿主提供） */
function labelOf(option) {
  if (option === null || option === undefined) return '';
  return typeof option === 'object' ? String(option.label === undefined ? '' : option.label) : String(option);
}

function disabledOf(option) {
  return !!(option && typeof option === 'object' && option.disabled);
}

/* 选中判据：选项是对象时比 value，否则比文本（与演示页同一口径） */
function sameValue(option, picked) {
  if (picked === undefined || picked === null || picked === '') return false;
  const value = option && typeof option === 'object' ? option.value : option;
  return String(value) === String(picked);
}

/* null = 跟随 value 属性；点选后本地记账，确认前不改宿主的值 */
const draft = ref(null);
const picked = computed(() => draft.value || (Array.isArray(props.value) ? props.value : []));

/* mode=single → 取 columns 第一列；mode=multiple → 全部列（规格 §43.3） */
const cols = computed(() => {
  const list = Array.isArray(props.columns) ? props.columns : [];
  return props.mode === 'single' ? list.slice(0, 1) : list;
});
const label = computed(() => {
  const t = props.title || '选择';
  return picked.value.length ? t + '：' + picked.value.join(' ') : t;
});

const panelClass = computed(() => [
  'kole-m-picker--' + (props.mode === 'multiple' ? 'multiple' : 'single'),
  props.round ? 'kole-m-picker--round' : '',
  props.open ? 'is-open' : '',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

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

function isOff(option) {
  return props.disabled || disabledOf(option);
}

function select(ci, option) {
  if (isOff(option)) return;
  const next = picked.value.slice();
  next[ci] = String(option && typeof option === 'object' ? option.value : option);
  draft.value = next;
}

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

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

function onConfirmClick() {
  if (props.disabled) return;
  emit('confirm', picked.value);
}
</script>

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