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

<template>
  <div>
    <slot></slot>
    <div
      v-if="mode === 'popup'"
      class="kole-m-cascader__mask"
      :class="{ 'is-open': open }"
      aria-hidden="true"
      @click="onMaskClick"
    ></div>
    <div
      class="kole-m-cascader"
      :class="panelClass"
      :role="mode === 'popup' ? 'dialog' : 'group'"
      :aria-modal="mode === 'popup' ? 'true' : null"
      :aria-label="mode === 'popup' ? (title || '选择地区') : label"
      :aria-hidden="mode === 'popup' && !open ? 'true' : null"
      :data-level="depth"
    >
      <div v-if="mode === 'popup'" class="kole-m-cascader__header">
        <button class="kole-m-cascader__btn" type="button" @click="onCancelClick">取消</button>
        <span class="kole-m-cascader__title">{{ title || '选择地区' }}</span>
        <button
          class="kole-m-cascader__btn kole-m-cascader__btn--confirm"
          type="button"
          @click="onConfirmClick"
        >确定</button>
      </div>

      <div v-if="showPath" class="kole-m-cascader__path">
        <template v-for="(item, i) in items" :key="item.value + '-' + i">
          <button
            class="kole-m-cascader__path-item"
            :class="{ 'is-current': i === items.length - 1 }"
            type="button"
            :aria-current="i === items.length - 1 ? 'true' : null"
            :disabled="i === items.length - 1"
            @click="back(i)"
          >{{ item.label }}</button>
          <span v-if="i !== items.length - 1" class="kole-m-cascader__sep" aria-hidden="true">›</span>
        </template>
      </div>

      <ul v-if="list.length" class="kole-m-cascader__panel" role="listbox" :aria-label="listLabel">
        <li
          v-for="(node, i) in list"
          :key="node.value + '-' + i"
          class="kole-m-cascader__option"
          :class="{ 'is-selected': isSelected(node), 'is-disabled': isOff(node) }"
          role="option"
          :aria-selected="isSelected(node) ? 'true' : 'false'"
          :aria-disabled="isOff(node) ? 'true' : null"
          @click="pick(node)"
        >
          <span class="kole-m-cascader__label">{{ node.label }}</span>
          <span v-if="isLeaf(node)" class="kole-m-cascader__check" aria-hidden="true">✓</span>
          <span v-else class="kole-m-cascader__arrow" aria-hidden="true">›</span>
        </li>
      </ul>
      <p v-else class="kole-m-cascader__empty">该级暂无可选项</p>
    </div>
  </div>
</template>

<script setup>
/* 级联选择器（移动端）— 规格 §44。
   多级联动：点某一级后下一级选项变化；点路径条里的上级可回退（规格 §44.5）。
   级数不写死：路径条按已选深度渲染，面板**只渲染当前一层** —— 375px 宽下并排多列会把
   每列压到 100px 以内，无法阅读（规格 §44.2）。
   变动只回传下一段路径（change），确认由宿主决定是否采纳。 */
import { computed, ref } from 'vue';

const props = defineProps({
  mode: { type: String, default: 'panel' },
  round: { type: Boolean, default: false },
  showPath: { type: Boolean, default: true },
  open: { type: Boolean, default: false },
  closeOnMask: { type: Boolean, default: true },
  value: { type: Array, default: () => [] },
  options: { type: Array, default: () => [] },
  disabled: { type: Boolean, default: false },
  title: { type: String, default: '' },
  label: { type: String, default: '级联选项' }
});
const emit = defineEmits(['change', 'confirm', 'close']);

const LAYER_LABELS = ['省份', '城市', '区县'];

/* 选项可以是字符串，也可以是 { label, value, disabled, children } 结点（规格 §44.7） */
function nodeOf(option, i) {
  if (option === null || option === undefined) return { label: '', value: String(i), disabled: false, children: [] };
  if (typeof option === 'object') {
    return {
      label: String(option.label === undefined ? '' : option.label),
      value: String(option.value === undefined ? i : option.value),
      disabled: !!option.disabled,
      children: Array.isArray(option.children) ? option.children.map(nodeOf) : []
    };
  }
  return { label: String(option), value: String(option), disabled: false, children: [] };
}

const tree = computed(() => (Array.isArray(props.options) ? props.options : []).map(nodeOf));

/* 沿 path 走到第 depth 级的选项数组（depth=0 是根） */
function levelList(path, depth) {
  let list = tree.value;
  for (let i = 0; i < depth; i++) {
    const hit = list.find((n) => n.value === String(path[i]));
    if (!hit || !hit.children.length) return [];
    list = hit.children;
  }
  return list;
}

/* 当前展示层级：末项是叶子时停在它所在层（可改选同级），否则展示下一级 */
function displayDepth(path) {
  let depth = path.length;
  if (depth > 0) {
    const parent = levelList(path, depth - 1);
    const last = parent.find((n) => n.value === String(path[depth - 1]));
    if (last && !last.children.length) depth -= 1;
  }
  return depth;
}

/* null = 跟随 value 属性；点选后本地记账，确认前不改宿主的值 */
const draft = ref(null);
const picked = computed(() => draft.value || (Array.isArray(props.value) ? props.value.map(String) : []));
const depth = computed(() => displayDepth(picked.value));
const list = computed(() => levelList(picked.value, depth.value));
const pickedValue = computed(() => picked.value[depth.value]);
const items = computed(() => {
  const out = [];
  let lv = tree.value;
  for (let i = 0; i < picked.value.length; i++) {
    const hit = lv.find((n) => n.value === String(picked.value[i]));
    if (!hit) break;
    out.push(hit);
    lv = hit.children;
  }
  return out;
});
const listLabel = computed(() => props.label + ' · ' + (LAYER_LABELS[depth.value] || '第 ' + (depth.value + 1) + ' 级'));

const panelClass = computed(() => [
  'kole-m-cascader--' + (props.mode === 'popup' ? 'popup' : 'panel'),
  props.showPath ? '' : 'kole-m-cascader--no-path',
  props.round ? 'kole-m-cascader--round' : '',
  props.open ? 'is-open' : '',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

function isSelected(node) {
  return String(node.value) === String(pickedValue.value === undefined ? '' : pickedValue.value);
}

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

function isLeaf(node) {
  return !node.children.length;
}

function emitPath(next) {
  draft.value = next;
  emit('change', next);
}

/* 点选项：截断更深的层级，写入本级选中值（规格 §44.5） */
function pick(node) {
  if (isOff(node)) return;
  const next = picked.value.slice(0, depth.value);
  next[depth.value] = node.value;
  emitPath(next);
}

/* 点路径条上的上级：退回该级，重新展示它的下一级 */
function back(d) {
  if (props.disabled) return;
  emitPath(picked.value.slice(0, d + 1));
}

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="./Cascader.css"></style>