|
@@ -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) `;
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
});
|