lsc 3 天之前
父節點
當前提交
61036c32d3
共有 1 個文件被更改,包括 19 次插入2 次删除
  1. 19 2
      src/views/components/element/FrameElement/BaseFrameElement.vue

+ 19 - 2
src/views/components/element/FrameElement/BaseFrameElement.vue

@@ -12,12 +12,17 @@
       :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
       <div class="element-content">
-        <iframe :srcdoc="elementInfo.url" v-if="elementInfo.isHTML"
+        <iframe 
+          :key="`html-${iframeKey}`"
+          :srcdoc="elementInfo.url" 
+          v-if="elementInfo.isHTML"
           :width="elementInfo.width"
           :height="elementInfo.height"
           :frameborder="0" 
-          :allowfullscreen="true"></iframe>
+          :allowfullscreen="true"
+        ></iframe>
         <iframe 
+          :key="`src-${iframeKey}`"
           v-else
           :src="elementInfo.url"
           :width="elementInfo.width"
@@ -36,6 +41,7 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import type { PPTFrameElement } from '@/types/slides'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   elementInfo: {
@@ -43,6 +49,17 @@ const props = defineProps({
     required: true,
   },
 })
+
+// 用于强制刷新iframe的key
+const iframeKey = ref(0)
+
+// 监听elementInfo.url的变化
+watch(() => props.elementInfo.url, (newUrl, oldUrl) => {
+  if (newUrl !== oldUrl) {
+    // 通过改变key来强制刷新iframe
+    iframeKey.value++
+  }
+})
 </script>
 
 <style lang="scss" scoped>