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

import { defineComponent, onMounted, ref } 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';
import { eventGlobal } from '/src/utils';

export default defineComponent({
  name: 'student-studentList',
  setup() {
    const tab = ref('myResources');
    onMounted(() => {
      eventGlobal.on('teacher-guideInfo', (name: string) => {
        if (name === 'natural-resources') {
          eventGlobal.emit('natural-resources-guide', tab.value);
        }
      });
    });
    return () => (
      <div class={styles.listWrap}>
        <NTabs
          defaultValue="myResources"
          paneClass={styles.paneTitle}
          justifyContent="center"
          // animated
          paneWrapperClass={styles.paneWrapperContainer}
          onUpdate:value={(val: any) => {
            tab.value = val;
          }}
          v-model:value={tab.value}>
          <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>
    );
  }
});