dengrui hai 10 meses
pai
achega
34eb904c05
Modificáronse 1 ficheiros con 38 adicións e 12 borrados
  1. 38 12
      src/components/PDFView/index.vue

+ 38 - 12
src/components/PDFView/index.vue

@@ -97,9 +97,12 @@ const rendered = () => {
   const clickableElements = document.querySelectorAll(
     ".el-drawer__body .vue-pdf-embed .vue-pdf-embed__page"
   );
-
-  clickableElements.forEach((element) => {
-    // 初始化一个属性来跟踪旋转角度
+  clickableElementsA.forEach((element) => {
+    element.style.display = "flex";
+    element.style.alignItems = "center";
+    element.style.justifyContent = "center";
+  });
+  clickableElements.forEach((element, index) => {
     let rotationAngle = 0;
     element.addEventListener("click", () => {
       const currentWidth = element.offsetWidth;
@@ -107,23 +110,46 @@ const rendered = () => {
       let distance = 0;
       if (currentHeight > currentWidth) {
         distance = currentHeight - currentWidth;
+      } else {
+        element.style.width = `${currentHeight}px`;
+        element.style.height = `${currentWidth}px`;
       }
       rotationAngle = (rotationAngle + 90) % 360;
       if (rotationAngle == 0) {
-        element.style.transform = `rotate(${rotationAngle}deg) `;
-        element.firstElementChild.style.transform = `translateY(0px) `;
+        if (distance > 0) {
+          element.style.transform = `rotate(${rotationAngle}deg) `;
+          element.firstElementChild.style.transform = `translateY(0px) `;
+        } else {
+          element.style.transform = `rotate(${rotationAngle}deg) `;
+          element.firstElementChild.style.transform = `translateY(0px) `;
+        }
       }
-      if (rotationAngle === 90) {
-        element.style.transform = `rotate(${rotationAngle}deg)`;
-        element.firstElementChild.style.transform = `translateY(-${distance / 2}px) `;
+      if (rotationAngle == 90) {
+        if (distance > 0) {
+          element.style.transform = `rotate(${rotationAngle}deg)`;
+          element.firstElementChild.style.transform = `translateY(-${distance / 2}px) `;
+        } else {
+          element.style.transform = `rotate(${rotationAngle}deg)`;
+          element.firstElementChild.style.transform = `translateY(0px) `;
+        }
       }
       if (rotationAngle === 180) {
-        element.style.transform = `rotate(${rotationAngle}deg) `;
-        element.firstElementChild.style.transform = `translateY(0px) `;
+        if (distance > 0) {
+          element.style.transform = `rotate(${rotationAngle}deg) `;
+          element.firstElementChild.style.transform = `translateY(0px) `;
+        } else {
+          element.style.transform = `rotate(${rotationAngle}deg) `;
+          element.firstElementChild.style.transform = `translateY(0px) `;
+        }
       }
       if (rotationAngle === 270) {
-        element.style.transform = `rotate(${rotationAngle}deg) `;
-        element.firstElementChild.style.transform = `translateY(${distance / 2}px) `;
+        if (distance > 0) {
+          element.style.transform = `rotate(${rotationAngle}deg) `;
+          element.firstElementChild.style.transform = `translateY(${distance / 2}px) `;
+        } else {
+          element.style.transform = `rotate(${rotationAngle}deg) `;
+          element.firstElementChild.style.transform = `translateY(0px) `;
+        }
       }
     });
   });