classroom-instruments/src/components/timerMeterOld/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('positive'); //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>
    );
  }
});