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

<template>
  <view class="kole-m-collapse" :class="collapseClass">
    <view
      v-for="(it, i) in items"
      :key="i"
      class="kole-m-collapse__item"
      :class="{ 'is-expanded': isOpen(it, i), 'is-disabled': it && it.disabled }"
    >
      <view
        class="kole-m-collapse__header"
        :role="it && it.disabled ? '' : 'button'"
        :aria-expanded="isOpen(it, i) ? 'true' : 'false'"
        :aria-disabled="it && it.disabled ? 'true' : 'false'"
        @tap="toggle(it, i)"
      >
        <text class="kole-m-collapse__title">{{ it && it.title }}</text>
        <text class="kole-m-collapse__arrow">›</text>
      </view>
      <view class="kole-m-collapse__panel" v-show="isOpen(it, i)">
        <text class="kole-m-collapse__content">{{ it && it.content }}</text>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 折叠面板（移动端）— 规格 §25
   跨端差异：标题行用 view + role="button"（小程序没有可聚焦的原生 button 语义），
   点击用 @tap，展开态同时写 aria-expanded 与 is-expanded；
   内容区用 v-show 切换（小程序里 hidden 属性不可靠，v-show 编译成 display 控制更稳）。
   尺寸用 rpx（88rpx = 375pt 下的 44px，故标题行 104rpx）。 */
import { computed, ref } from 'vue';

const props = defineProps({
  items: { type: Array, default: () => [] },
  accordion: { type: Boolean, default: false },
  bordered: { type: Boolean, default: true },
  value: { type: Array, default: () => [] }
});
const emit = defineEmits(['change']);

/* null = 跟随 value 属性；点击后本地记账（与 DatePicker 同一约定） */
const open = ref(null);

const collapseClass = computed(() => [
  props.accordion ? 'kole-m-collapse--accordion' : '',
  props.bordered ? 'kole-m-collapse--bordered' : ''
].filter(Boolean));

function keyOf(it, i) {
  return it && it.key !== undefined ? it.key : i;
}
function current() {
  return open.value || props.value;
}
function isOpen(it, i) {
  return current().indexOf(keyOf(it, i)) >= 0;
}
function toggle(it, i) {
  if (it && it.disabled) return;
  const key = keyOf(it, i);
  const cur = current();
  const has = cur.indexOf(key) >= 0;
  open.value = props.accordion
    ? has
      ? []
      : [key]
    : has
      ? cur.filter((k) => k !== key)
      : cur.concat([key]);
  emit('change', key, !has);
}
</script>

<style>
.kole-m-collapse {
  --kole-m-collapse-header-height: 104rpx;  /* 标题行高度（≥ 88rpx 触控最小边长） */
  --kole-m-collapse-duration: 180ms;
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-collapse--bordered {
  border: 1rpx solid var(--kole-color-border);
  border-radius: 16rpx;
  overflow: hidden;
}

.kole-m-collapse--bordered .kole-m-collapse__item + .kole-m-collapse__item {
  border-top: 1rpx solid var(--kole-color-border);
}

.kole-m-collapse__header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--kole-m-collapse-header-height);
  padding: 24rpx var(--kole-m-gutter);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-title);
  font-size: inherit;
}

/* 状态 active：按下反馈 */
.kole-m-collapse__header:active { background-color: var(--kole-color-table-header-bg); }

.kole-m-collapse__title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 箭头：收起指右，展开转 90° 指下 */
.kole-m-collapse__arrow {
  flex-shrink: 0;
  padding-left: 24rpx;
  color: var(--kole-color-text-placeholder);
  transition: transform var(--kole-m-collapse-duration) ease;
}

.kole-m-collapse__item.is-expanded .kole-m-collapse__arrow { transform: rotate(90deg); }

.kole-m-collapse__panel {
  padding: 24rpx var(--kole-m-gutter) 32rpx;
  border-top: 1rpx solid var(--kole-color-border);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
  line-height: 1.7;
}

.kole-m-collapse__item.is-disabled .kole-m-collapse__header {
  color: var(--kole-color-text-disabled);
}
</style>