aurora-admin/frameworks-mobile/Cascader.vue2.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">
          <button
            :key="'p' + i"
            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" :key="'s' + i" 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>
/* 级联选择器（移动端）— 规格 §44。
   多级联动：点某一级后下一级选项变化；点路径条里的上级可回退（规格 §44.5）。
   级数不写死：路径条按已选深度渲染，面板**只渲染当前一层** —— 375px 宽下并排多列会把
   每列压到 100px 以内，无法阅读（规格 §44.2）。
   变动只回传下一段路径（change），确认由宿主决定是否采纳。 */

var 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: [] };
}

function normTree(options) {
  return (Array.isArray(options) ? options : []).map(nodeOf);
}

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

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

/* 路径条：已选各级的结点（用于渲染可点回的按钮） */
function pathItems(tree, path) {
  var out = [];
  var list = tree;
  for (var i = 0; i < path.length; i++) {
    var hit = null;
    for (var k = 0; k < list.length; k++) {
      if (list[k].value === String(path[i])) { hit = list[k]; break; }
    }
    if (!hit) break;
    out.push(hit);
    list = hit.children;
  }
  return out;
}

export default {
  name: 'KoleMCascader',
  props: {
    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: function () { return []; } },
    options: { type: Array, default: function () { return []; } },
    disabled: { type: Boolean, default: false },
    title: { type: String, default: '' },
    label: { type: String, default: '级联选项' }
  },
  data: function () {
    return {
      LAYER_LABELS: LAYER_LABELS,
      /* null = 跟随 value 属性；点选后本地记账，确认前不改宿主的值 */
      draft: null
    };
  },
  computed: {
    tree: function () {
      return normTree(this.options);
    },
    picked: function () {
      return this.draft || (Array.isArray(this.value) ? this.value.map(String) : []);
    },
    depth: function () {
      return displayDepth(this.tree, this.picked);
    },
    list: function () {
      return levelList(this.tree, this.picked, this.depth);
    },
    pickedValue: function () {
      return this.picked[this.depth];
    },
    items: function () {
      return pathItems(this.tree, this.picked);
    },
    listLabel: function () {
      return this.label + ' · ' + (LAYER_LABELS[this.depth] || '第 ' + (this.depth + 1) + ' 级');
    },
    panelClass: function () {
      return [
        'kole-m-cascader--' + (this.mode === 'popup' ? 'popup' : 'panel'),
        this.showPath ? '' : 'kole-m-cascader--no-path',
        this.round ? 'kole-m-cascader--round' : '',
        this.open ? 'is-open' : '',
        this.disabled ? 'is-disabled' : ''
      ].filter(Boolean);
    }
  },
  methods: {
    isSelected: function (node) {
      return String(node.value) === String(this.pickedValue === undefined ? '' : this.pickedValue);
    },
    isOff: function (node) {
      return this.disabled || node.disabled;
    },
    isLeaf: function (node) {
      return !node.children.length;
    },
    emitPath: function (next) {
      this.draft = next;
      this.$emit('change', next);
    },
    /* 点选项：截断更深的层级，写入本级选中值（规格 §44.5） */
    pick: function (node) {
      if (this.isOff(node)) return;
      var next = this.picked.slice(0, this.depth);
      next[this.depth] = node.value;
      this.emitPath(next);
    },
    /* 点路径条上的上级：退回该级，重新展示它的下一级 */
    back: function (d) {
      if (this.disabled) return;
      this.emitPath(this.picked.slice(0, d + 1));
    },
    onMaskClick: function () {
      if (!this.closeOnMask) return;
      this.$emit('close');
    },
    onCancelClick: function () {
      this.$emit('close');
    },
    onConfirmClick: function () {
      if (this.disabled) return;
      this.$emit('confirm', this.picked);
    }
  }
};
</script>

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