Pref(优化)preview.actions为空不渲染 (#1462)

* perf: 在没有action的情况下则不进行dom操作 * pref: update * style: 退回原格式 * bugfix: 修复分屏下不显示
Vanessa219 · Sep 2, 2023 · f9e52a8 · f9e52a8
1 parent 554e5b5
commit f9e52a8
Showing 1 changed file with 37 additions and 34 deletions.
diff --git a/src/ts/preview/index.ts b/src/ts/preview/index.ts
@@ -98,46 +98,49 @@ export class Preview {
                     break;
             }
         }
-        actionElement.innerHTML = actionHtml.join("");
         if (actions.length === 0) {
             actionElement.style.display = "none";
-        }
-        this.element.appendChild(actionElement);
-        this.element.appendChild(previewElement);
+            this.element.appendChild(previewElement);
+            previewElement.style.width = "auto";
+        } else {
+            actionElement.innerHTML = actionHtml.join("");
+            this.element.appendChild(actionElement);
+            this.element.appendChild(previewElement);
 
-        actionElement.addEventListener(getEventName(), (event) => {
-            const btn = hasClosestByTag(event.target as HTMLElement, "BUTTON");
-            if (!btn) {
-                return;
-            }
-            const type = btn.getAttribute("data-type");
-            const actionCustom = actions.find((w: IPreviewActionCustom) => w?.key === type) as IPreviewActionCustom;
-            if (actionCustom) {
-                actionCustom.click(type);
-                return;
-            }
+            actionElement.addEventListener(getEventName(), (event) => {
+                const btn = hasClosestByTag(event.target as HTMLElement, "BUTTON");
+                if (!btn) {
+                    return;
+                }
+                const type = btn.getAttribute("data-type");
+                const actionCustom = actions.find((w: IPreviewActionCustom) => w?.key === type) as IPreviewActionCustom;
+                if (actionCustom) {
+                    actionCustom.click(type);
+                    return;
+                }
 
-            if (type === "mp-wechat" || type === "zhihu") {
-                this.copyToX(vditor, this.element.lastElementChild.cloneNode(true) as HTMLElement, type);
-                return;
-            }
+                if (type === "mp-wechat" || type === "zhihu") {
+                    this.copyToX(vditor, this.element.lastElementChild.cloneNode(true) as HTMLElement, type);
+                    return;
+                }
 
-            if (type === "desktop") {
-                previewElement.style.width = "auto";
-            } else if (type === "tablet") {
-                previewElement.style.width = "780px";
-            } else {
-                previewElement.style.width = "360px";
-            }
-            if (previewElement.scrollWidth > previewElement.parentElement.clientWidth) {
-                previewElement.style.width = "auto";
-            }
-            this.render(vditor);
-            actionElement.querySelectorAll("button").forEach((item) => {
-                item.classList.remove("vditor-preview__action--current");
+                if (type === "desktop") {
+                    previewElement.style.width = "auto";
+                } else if (type === "tablet") {
+                    previewElement.style.width = "780px";
+                } else {
+                    previewElement.style.width = "360px";
+                }
+                if (previewElement.scrollWidth > previewElement.parentElement.clientWidth) {
+                    previewElement.style.width = "auto";
+                }
+                this.render(vditor);
+                actionElement.querySelectorAll("button").forEach((item) => {
+                    item.classList.remove("vditor-preview__action--current");
+                });
+                btn.classList.add("vditor-preview__action--current");
             });
-            btn.classList.add("vditor-preview__action--current");
-        });
+        }
     }
 
     public render(vditor: IVditor, value?: string) {