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

<template>
  <view>
    <slot></slot>
    <view
      class="kole-m-picker__mask"
      :class="{ 'is-open': open }"
      aria-hidden="true"
      @tap="onMaskTap"
      @touchmove.stop.prevent
    ></view>
    <view
      class="kole-m-picker"
      :class="panelClass"
      :role="'dialog'"
      :aria-modal="'true'"
      :aria-labelledby="titleId"
      :aria-hidden="open ? 'false' : 'true'"
    >
      <view class="kole-m-picker__header">
        <view class="kole-m-picker__btn" role="button" @tap="onCancelTap">
          <text>取消</text>
        </view>
        <text class="kole-m-picker__title" :id="titleId">{{ label }}</text>
        <view
          class="kole-m-picker__btn kole-m-picker__btn--confirm"
          role="button"
          @tap="onConfirmTap"
        >
          <text>确定</text>
        </view>
      </view>
      <view class="kole-m-picker__columns">
        <scroll-view
          v-for="(col, ci) in cols"
          :key="col.key || ci"
          class="kole-m-picker__column"
          scroll-y
          :role="'listbox'"
          :aria-label="col.label"
        >
          <view
            v-for="(option, i) in col.options || []"
            :key="labelOf(option) + '-' + i"
            class="kole-m-picker__option"
            :class="isSelected(ci, option) ? 'is-selected' : (isOff(option) ? 'is-disabled' : '')"
            :role="'option'"
            :aria-selected="isSelected(ci, option) ? 'true' : 'false'"
            :aria-disabled="isOff(option) ? 'true' : 'false'"
            @tap="select(ci, option)"
          >
            <text>{{ labelOf(option) }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
/* uni-app 端 · 选择器（移动端）— 规格 §43
   跨端差异：用 view / text；每列用 scroll-view（scroll-y）代替 ul / li，滚动由小程序/App 原生接管，
   role / aria-* 仍按规格 §43.6 保留（用 :role / :aria-* 绑定，H5 产物里生效）。
   点击一律 @tap；遮罩用 @touchmove.stop.prevent 阻止背景滚动穿透。
   面板标题元素 id 用模块级自增序号拼出，同页多实例不撞号；aria-labelledby 指向它。
   本端不发明选择事件（契约只有 confirm / close）：点选只改本地高亮。
   尺寸用 rpx（88rpx = 375pt 下的 44px 触控最小边长）。 */
import { computed, ref } from 'vue';

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

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：组件初始化时占一个号，保证同页多实例不撞号 */
titleSeed += 1;
const titleId = 'kole-m-picker-title-' + titleSeed;

/* 选项可能是字符串，也可能是 { 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' : ''
].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 onMaskTap() {
  if (!props.closeOnMask) return;
  emit('close');
}

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

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

<style>
.kole-m-picker {
  --kole-m-picker-column-height: 400rpx;
  --kole-m-picker-option-height: 88rpx;
  --kole-m-touch-target: 88rpx;
  --kole-m-action-height: 112rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2001;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-picker__mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background-color: var(--kole-color-mask);
  opacity: 0;
}

.kole-m-picker__mask.is-open { opacity: 1; }

/* 变体 mode=single：只有一列，占满整个宽度 */
.kole-m-picker--single .kole-m-picker__column { flex: 1; }

/* 变体 mode=multiple：多列等分（联动时后一列随前一列重建） */
.kole-m-picker--multiple .kole-m-picker__column { flex: 1; }

/* 变体 round=true：靠内容一侧切圆角 */
.kole-m-picker--round {
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}

.kole-m-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx var(--kole-m-gutter);
  border-bottom: 1rpx solid var(--kole-color-border);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-picker__title {
  color: var(--kole-color-text-title);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-picker__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--kole-m-touch-target);
  padding: 0 16rpx;
  border-radius: 8rpx;
  color: var(--kole-color-brand);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-picker__btn--confirm { font-weight: 500; }

.kole-m-picker__columns {
  display: flex;
  align-items: stretch;
}

.kole-m-picker__column {
  min-width: 0;
  max-height: var(--kole-m-picker-column-height);
}

.kole-m-picker__option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kole-m-picker-option-height);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-label);
  text-align: center;
}

/* 状态 selected：当前选中项（品牌色高亮，与 aria-selected 同步） */
.kole-m-picker__option.is-selected {
  color: var(--kole-color-brand);
  font-weight: 500;
}

/* 状态 disabled：选项不可选（置灰） */
.kole-m-picker__option.is-disabled { color: var(--kole-color-text-disabled); }
</style>