classroom-instruments/src/components/timerMeter/index.tsx

import { defineComponent, ref, watch, nextTick, onMounted } from 'vue';
import styles from './index.module.less';
import { NTabs, NTabPane, NSpace, NButton } from 'naive-ui';
import { useRoute } from 'vue-router';
import Countdown from './components/countdown';
import Positive from './components/positive';
export default defineComponent({
  name: 'data-module',
  setup() {
    const activeTab = ref('countdown');  //countdown
    const route = useRoute();
    // onMounted(() => {
    // })
    const setActivePinia = (name: string) => {
      activeTab.value = name
    }
    return () => (
      <div>
        <div class={styles.timerWrap}>
          <div class={styles.timerTop}>
            <div class={[styles.timerTopPane, activeTab.value == 'positive' ? styles.timerTopPaneActive : '']} onClick={() => { setActivePinia('positive') }}>正计时</div>
            <div class={[styles.timerTopPane, activeTab.value == 'countdown' ? styles.timerTopPaneActive : '']} onClick={() => { setActivePinia('countdown') }}>倒计时</div>
          </div>
          {activeTab.value == 'positive' ? <Positive></Positive> : <Countdown></Countdown>}
        </div>
      </div>
    );
  }
});