update

doc/CustomElement.md

@@ -192,14 +192,20 @@ const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
 此外我们需要另一个不带编辑功能的基础版组件，用于缩略图/放映模式下显示：
 ```html
 <!-- views/components/element/FrameElement/BaseFrameElement.vue -->
+      <!-- 
+      width: elementInfo.width + 'px',
+      height: elementInfo.height + 'px',
 
+                :width="elementInfo.width"
+          :height="elementInfo.height"
+      -->
 <template>
   <div class="base-element-frame"
     :style="{
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
-      width: elementInfo.width + 'px',
-      height: elementInfo.height + 'px',
+      width: 100%,
+      height: 100%,
     }"
   >
     <div
@@ -208,9 +214,11 @@ const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
     >
       <div class="element-content">
         <iframe 
+          :style="{
+            width: 100%,
+            height: 100%,
+          }"
           :src="elementInfo.url"
-          :width="elementInfo.width"
-          :height="elementInfo.height"
           :frameborder="0" 
           :allowfullscreen="true"
         ></iframe>

src/views/Screen/ScreenSlide.vue

@@ -1,11 +1,12 @@
 <template>
-  <div 
-    class="screen-slide"
-    :style="{
+<!-- {
       width: viewportSize + 'px',
       height: viewportSize * viewportRatio + 'px',
       transform: `scale(${iframeScale})`,
-    }"
+    } -->
+  <div 
+    class="screen-slide"
+    :style="iframeScale"
   >
     <div class="background" :style="{ ...backgroundStyle }"></div>
     <ScreenElement
@@ -60,9 +61,19 @@ const hasIframe = computed(() => {
 const iframeScale = computed(() => {
   if (hasIframe.value) {
     // return Math.min(props.scale, 1)
-    return props.scale
+    //return props.scale;
+    return {
+      width: '100%',
+      height: '100%',
+      transform: `scale(1)`,
+    }
+
+  }
+  return {
+      width: viewportSize + 'px',
+      height: viewportSize * viewportRatio + 'px',
+      transform: `scale(${props.scale})`,
   }
-  return props.scale
 })
 </script>
 

src/views/components/element/FrameElement/BaseFrameElement.vue

@@ -1,10 +1,16 @@
 <template>
+<!-- 
+
+      width: elementInfo.width + 'px',
+      height: elementInfo.height + 'px',
+
+-->
   <div class="base-element-frame"
     :style="{
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
-      width: elementInfo.width + 'px',
-      height: elementInfo.height + 'px',
+      width: '100%',
+      height: '100%',
     }"
   >
     <div
@@ -27,8 +33,10 @@
           v-else-if="elementInfo.toolType === 75 && !isThumbnail && isVisible"
           :key="`bilibili-${iframeKey}`"
           :src="elementInfo.url"
-          :width="elementInfo.width"
-          :height="elementInfo.height"
+          :style="{
+            width: '100%',
+            height: '100%',
+          }"
           :frameborder="0" 
           :allowfullscreen="true"
           allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
@@ -39,8 +47,10 @@
           :key="`html-${iframeKey}`"
           :srcdoc="elementInfo.url" 
           v-else-if="elementInfo.isHTML && !isThumbnail && isVisible"
-          :width="elementInfo.width"
-          :height="elementInfo.height"
+          :style="{
+            width: '100%',
+            height: '100%',
+          }"
           :frameborder="0" 
           :allowfullscreen="true"
           allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
@@ -50,8 +60,10 @@
           :key="`src-${iframeKey}`"
           v-else-if="!isThumbnail && isVisible"
           :src="elementInfo.url"
-          :width="elementInfo.width"
-          :height="elementInfo.height"
+          :style="{
+            width: '100%',
+            height: '100%',
+          }"
           :frameborder="0" 
           :allowfullscreen="true"
           allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"