classroom-instruments/src/views/preview-window/index.tsx

import { PropType, defineComponent, onMounted, ref, toRefs, watch } from 'vue';
import styles from './index.module.less';
import { NModal } from 'naive-ui';
import AttendClass from '../attend-class';

export default defineComponent({
  name: 'preview-window',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    params: {
      type: Object as PropType<any>,
      default: () => ({})
    }
  },
  emit: ['update:show'],
  setup(props, { emit }) {
    const { show, type, params } = toRefs(props);
    console.log(type.value, 'type');
    watch(
      () => props.show,
      () => {
        show.value = props.show;
      }
    );

    watch(
      () => props.type,
      () => {
        type.value = props.type;
      }
    );

    watch(
      () => props.params,
      () => {
        params.value = props.params;
      }
    );

    return () => (
      <NModal
        v-model:show={show.value}
        onUpdate:show={() => {
          emit('update:show', show.value);
        }}
        class={styles.previewWindow}
        showIcon={false}
        displayDirective="show">
        {type.value === 'attend' ? (
          <AttendClass
            type={params.value.type || ''}
            subjectId={params.value.subjectId || ''}
            detailId={params.value.detailId || ''}
            classGroupId={params.value.classGroupId || ''}
            onClose={() => emit('update:show', false)}
          />
        ) : (
          ''
        )}
        {/* 曲谱 */}
        {type.value === 'notation' ? (
          <iframe src={params.value.src}></iframe>
        ) : (
          ''
        )}
      </NModal>
    );
  }
});