ソースを参照

fix(FrameElement): 为iframe添加key属性以解决URL更新时渲染问题

当iframe的URL更新时,强制重新渲染iframe组件以确保内容正确更新
lsc 2 日 前
コミット
9e91b354b6
1 ファイル変更12 行追加0 行削除
  1. 12 0
      src/views/components/element/FrameElement/index.vue

+ 12 - 0
src/views/components/element/FrameElement/index.vue

@@ -30,6 +30,7 @@
         <!-- B站视频类型(type 75):使用 iframe -->
         <iframe 
           v-else-if="elementInfo.toolType === 75"
+          :key="'bilibili-' + iframeKey"
           :src="elementInfo.url"
           :width="elementInfo.width"
           :height="elementInfo.height"
@@ -40,6 +41,7 @@
         <!-- 其他类型:保持原有逻辑 -->
         <iframe 
           v-else-if="elementInfo.isHTML"
+          :key="'html-' + iframeKey"
           :srcdoc="elementInfo.url"
           :width="elementInfo.width"
           :height="elementInfo.height"
@@ -49,6 +51,7 @@
         ></iframe>
         <iframe 
           v-else
+          :key="'src-' + iframeKey"
           :src="elementInfo.url"
           :width="elementInfo.width"
           :height="elementInfo.height"
@@ -78,6 +81,7 @@ import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import type { PPTFrameElement } from '@/types/slides'
 import type { ContextmenuItem } from '@/components/Contextmenu/types'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   elementInfo: {
@@ -96,6 +100,14 @@ const props = defineProps({
 
 const { handleElementId } = storeToRefs(useMainStore())
 
+const iframeKey = ref(0)
+
+watch(() => props.elementInfo.url, (newUrl, oldUrl) => {
+  if (newUrl !== oldUrl) {
+    iframeKey.value++
+  }
+})
+
 const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
   e.stopPropagation()
   props.selectElement(e, props.elementInfo, canMove)