classroom-instruments/src/views/natural-resources/index.tsx

import { defineComponent } from 'vue';
import styles from './index.module.less';
import { NTabPane, NTabs } from 'naive-ui';
import ShareResources from './components/share-resources';
import MyResources from './components/my-resources';
import MyCollect from './components/my-collect';

export default defineComponent({
  name: 'student-studentList',
  setup() {
    return () => (
      <div class={styles.listWrap}>
        <NTabs
          defaultValue="myResources"
          paneClass={styles.paneTitle}
          justifyContent="center"
          // animated
          paneWrapperClass={styles.paneWrapperContainer}>
          <NTabPane
            name="myResources"
            tab="我的资源"
            // displayDirective="show:lazy"
          >
            <MyResources />
          </NTabPane>
          <NTabPane
            name="shareResources"
            tab="共享资源"
            v-slots={{
              tab: () => <span id="shareResources-0">共享资源</span>
            }}>
            <ShareResources />
          </NTabPane>
          <NTabPane
            name="myCollect"
            tab="我的收藏"
            // displayDirective="show:lazy"
          >
            <MyCollect />
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});