xiangyuan-gov-app/src/components/display/CollapseItem.vue

<template>
  <FlexView direction="column" :data-position="position">
    <slot 
      name="cell" 
      :state="state" 
      :title="title"
      :value="value"
      :label="label"
      :size="size"
      :icon="icon"
    >
      <Cell 
        :title="title"
        :value="value"
        :label="label"
        :size="size"
        :icon="icon"
        :touchable="!props.disabled"
        :innerStyle="{
          opacity: props.disabled ? 0.7 : 1,
        }"
        :topBorder="props.border"
        @click="context.itemClick(id)"
      > 
        <!-- TODO: Fix -->
        <!-- #ifndef MP -->
        <template v-if="$slots.icon" #leftIcon>
          <slot name="icon" />
        </template>
        <template v-if="$slots.label" #label>
          <slot name="label" />
        </template>
        <template v-if="$slots.value" #value>
          <slot name="value" />
        </template>
        <template v-if="$slots.title" #title>
          <slot name="title" />
        </template>
        <!-- #endif -->
        <template #rightIcon>
          <Icon 
            icon="arrow-down" 
            :rotate="state ? 180 : 0"
            :innerStyle="{ transition: 'transform 0.3s ease-in-out' }"
          />
        </template>
      </Cell>
    </slot>
    <CollapseBox :open="state" :anim-duration="context.animDuration.value" :name="'' + (name || position)">
      <slot />
    </CollapseBox>
  </FlexView>
</template>

<script setup lang="ts">
import { computed, inject } from 'vue';
import FlexView from '../layout/FlexView.vue';
import type { CollapseContext } from './Collapse.vue';
import Cell from '../basic/Cell.vue';
import CollapseBox from './CollapseBox.vue';
import Icon from '../basic/Icon.vue';
import { useChildLinkChild } from '../composeabe/ChildItem';

export interface CollapseProps {
  /**
   * 当前面板的唯一标识符，默认为索引值
   */
  name?: number | string;
  /**
   * 标题栏左侧图标名称或图片链接，等同于 Icon 组件的 icon 属性
   */
  icon?: string;
  /**
   * 标题栏大小，可选值为 large
   * @default 'medium'
   */
  size?: 'medium' | 'large';
  /**
   * 标题栏左侧内容
   */
  title?: string;
  /**
   * 标题栏右侧内容
   */
  value?: string;
  /**
   * 标题栏描述信息
   */
  label?: string;
  /**
   * 是否显示内边框
   */
  border?: boolean;
  /**
   * 是否禁用面板
   */
  disabled?: boolean;
}

const emit = defineEmits([ 'update:modelValue' ]);
const props = defineProps<CollapseProps>();


const context = inject<CollapseContext>('CollapseContext')!;
const id = computed(() => props.name || position.value);
const state = computed(() => context.activeName.value.includes(id.value));

const { position } = useChildLinkChild(() => ({ index: context.getPosition(props.name) }));
</script>