|
@@ -1,5 +1,5 @@
|
|
|
-import { NModal } from 'naive-ui';
|
|
|
-import { defineComponent, toRef, watch } from 'vue';
|
|
|
+import { NModal, NSpin } from 'naive-ui';
|
|
|
+import { defineComponent, ref, toRef, watch } from 'vue';
|
|
|
import styles from './index.module.less';
|
|
|
import VideoModal from './video-modal';
|
|
|
import MusicModal from './music-modal';
|
|
@@ -22,6 +22,7 @@ export default defineComponent({
|
|
|
setup(props, { emit }) {
|
|
|
const show = toRef(props.show);
|
|
|
const item = toRef(props.item);
|
|
|
+ const pptLoading = ref(true);
|
|
|
|
|
|
watch(
|
|
|
() => props.show,
|
|
@@ -42,6 +43,9 @@ export default defineComponent({
|
|
|
v-model:show={show.value}
|
|
|
onUpdate:show={() => {
|
|
|
emit('update:show', show.value);
|
|
|
+ if (!show.value) {
|
|
|
+ pptLoading.value = true;
|
|
|
+ }
|
|
|
}}
|
|
|
preset="card"
|
|
|
showIcon={false}
|
|
@@ -58,14 +62,20 @@ export default defineComponent({
|
|
|
{item.value.type === 'MUSIC' && <MusicModal item={item.value} />}
|
|
|
{item.value.type === 'SONG' && <SongModal item={item.value} />}
|
|
|
{item.value.type === 'PPT' && (
|
|
|
- <iframe
|
|
|
- class={styles.pptBox}
|
|
|
- src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
|
|
|
- item.value.content
|
|
|
- )}`}
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- frameborder="1"></iframe>
|
|
|
+ <NSpin show={pptLoading.value}>
|
|
|
+ <iframe
|
|
|
+ class={styles.pptBox}
|
|
|
+ src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
|
|
|
+ item.value.content
|
|
|
+ )}`}
|
|
|
+ onLoad={() => {
|
|
|
+ console.log('loading end');
|
|
|
+ pptLoading.value = false;
|
|
|
+ }}
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ frameborder="1"></iframe>
|
|
|
+ </NSpin>
|
|
|
)}
|
|
|
{!['VIDEO', 'MUSIC', 'SONG', 'PPT'].includes(item.value.type) && (
|
|
|
<TheEmpty />
|