classroom-instruments/src/views/attend-class/component/rhythm-modal/index.tsx

import { defineComponent, ref, watch } from 'vue';
import styles from './index.module.less';
import { useUserStore } from '/src/store/modules/users';
import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
import { iframeDislableKeyboard } from '/src/utils';

export default defineComponent({
  name: 'song-modal',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    activeStatus: {
      type: Boolean,
      default: false
    },
    imagePos: {
      type: String,
      default: 'left'
    }
  },
  emits: ['setIframe'],
  setup(props, { emit }) {
    const userStore = useUserStore();
    const iframeRef = ref();
    const isLoaded = ref(false);
    let src = `${
      location.origin
    }/classroom-app/#/tempo-practice?v=${+new Date()}&platform=modal&dataJson=${
      props.item.dataJson
    }&Authorization=${userStore.getToken}&win=pc&imagePos=${props.imagePos}`;
    if (/(localhost|192)/.test(location.host)) {
      src = `https://test.kt.colexiu.com/classroom-app/#/tempo-practice?v=${+new Date()}&platform=modal&dataJson=${
        props.item.dataJson
      }&Authorization=${userStore.getToken}&win=pc&imagePos=${props.imagePos}`;
    }

    watch(
      () => props.activeStatus,
      () => {
        if (!props.activeStatus) {
          iframeRef.value.contentWindow?.postMessage({ api: 'resetPlay' }, '*');
        }
      }
    );

    return () => (
      <div class={styles.musicScore}>
        <iframe
          ref={iframeRef}
          onLoad={(val: any) => {
            emit('setIframe', iframeRef.value);
            isLoaded.value = true;
            iframeDislableKeyboard(val.target);
          }}
          class={[styles.container, 'musicIframe']}
          frameborder="0"
          src={src}></iframe>
      </div>
    );
  }
});