PDF展示回退

src/components/PDFView/index.vue

@@ -40,7 +40,7 @@
   </el-drawer>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import VuePdfEmbed from "vue-pdf-embed";
 // essential styles
 import "vue-pdf-embed/dist/style/index.css";
@@ -64,7 +64,7 @@ const props = defineProps({
     default: false,
   },
   contentType: {
-    type: String as PropType<"button" | "pdf">,
+    type: String,
     default: "pdf",
   },
   btnText: {
@@ -91,9 +91,11 @@ const showPdf = () => {
   visible.value = true;
 };
 const rendered = () => {
-  const clickableElementsA = document.querySelectorAll(".vue-pdf-embed div");
+  const clickableElementsA = document.querySelectorAll(
+    ".el-drawer__body .vue-pdf-embed div"
+  );
   const clickableElements = document.querySelectorAll(
-    ".vue-pdf-embed .vue-pdf-embed__page"
+    ".el-drawer__body .vue-pdf-embed .vue-pdf-embed__page"
   );
   clickableElementsA.forEach((element) => {
     element.style.display = "flex";
@@ -107,7 +109,12 @@ const rendered = () => {
       const currentHeight = element.offsetHeight;
       const parent = element.parentNode;
       let distance = 0;
-      distance = currentHeight - currentWidth;
+      if (currentHeight > currentWidth) {
+        distance = currentHeight - currentWidth;
+      } else {
+        element.style.width = `${currentHeight}px`;
+        element.style.height = `${currentWidth}px`;
+      }
       rotationAngle = (rotationAngle + 90) % 360;
       if (rotationAngle == 0) {
         if (distance > 0) {
@@ -124,7 +131,7 @@ const rendered = () => {
           element.firstElementChild.style.transform = `translateY(-${distance / 2}px) `;
         } else {
           element.style.transform = `rotate(${rotationAngle}deg)`;
-          element.firstElementChild.style.transform = `translateX(${-distance / 2}px)`;
+          element.firstElementChild.style.transform = `translateY(0px) `;
         }
       }
       if (rotationAngle === 180) {
@@ -142,7 +149,7 @@ const rendered = () => {
           element.firstElementChild.style.transform = `translateY(${distance / 2}px) `;
         } else {
           element.style.transform = `rotate(${rotationAngle}deg) `;
-          element.firstElementChild.style.transform = `translateX(${distance / 2}px)`;
+          element.firstElementChild.style.transform = `translateY(0px) `;
         }
       }
       parent.style.width = `${currentWidth}px`;
@@ -191,8 +198,4 @@ const rendered = () => {
 };
 </script>
 
-<style lang="scss" scoped>
-.a {
-  position: relative;
-}
-</style>
+<style lang="scss" scoped></style>