xiangyuan-gov-app/src/components/nav/TabsPage.vue

<script setup lang="ts">
import { ref, type PropType } from 'vue';
import { useTheme } from '../theme/ThemeDefine';
import Tabs, { type TabsItemData, type TabsProps } from './Tabs.vue';

const props = defineProps({	
  tabs: {
    type: Object as PropType<TabsItemData[]>,
    default: () => []
  },
  tabProps: {
    type: Object as PropType<Omit<TabsProps, 'tabs'|'currentIndex'>>,
    default: () => ({})
  },
  firstActiveIndex: {
    type: Number,
    default: 0,
  },
  innerStyle: {
    type: Object,
    default: () => ({})
  },
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  }
})

const activeIndex = ref(props.firstActiveIndex);
const loadedState = ref<boolean[]>([]);

const theme = useTheme();
</script>

<template>
  <view class="nana-tabs-page" :style="innerStyle">
    <Tabs 
      v-model:currentIndex="activeIndex"
      :tabs="tabs"
    />
    <view
      v-for="(t, i) in tabs" 
      v-show="activeIndex===i"
      class="nana-tabs-page-inner"
      :key="i"
    >
      <slot v-if="!t.lazy || loadedState[i]" 
        name="page" 
        :key="i" 
        :text="tabs[i].text"
      />
    </view>
  </view>
</template>

<style lang="scss">
.nana-tabs-page {
  position: relative;
  width: 100%;

  .nana-tabs-page-inner {
    width: 100%;
    min-height: 200rpx;
    flex: 1;
  }
}
</style>