将添加搜索元素的操作放在Vue组件挂载后执行

TCOTC · Mar 27, 2024 · 603ca3f · 603ca3f
1 parent 152cae5
commit 603ca3f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/plugin.json b/plugin.json
@@ -2,7 +2,7 @@
   "name": "siyuan-plugin-hsr-mdzz2048-fork",
   "author": "TCOTC",
   "url": "https://github.com/TCOTC/siyuan-plugin-hsr-mdzz2048-fork",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "minAppVersion": "2.9.8",
   "backends": ["windows", "linux", "darwin"],
   "frontends": ["desktop", "browser-desktop"],

diff --git a/src/index.ts b/src/index.ts
@@ -2,9 +2,9 @@ import { Plugin, getFrontend, getBackend } from "siyuan";
 import { createApp } from "vue";
 import { onMounted } from 'vue';
 import SearchVue from "./Search.vue";
-import "./index.scss"
+import "./index.scss";
 
-const CLASS_NAME = "highlight-search-result"
+const CLASS_NAME = "highlight-search-result";
 
 const SearchComponent = {
     setup() {
@@ -22,22 +22,43 @@ const SearchComponent = {
 
 export default class PluginHighlight extends Plugin {
 
-    onload() {
+    addSearchElement(edit) {
+        const existingElement = edit.querySelector(`.${CLASS_NAME}`);
+
+        if (!existingElement) {
+            const element = document.createElement("div");
+            element.className = CLASS_NAME;
+            edit.appendChild(element);
+            console.log(element, edit);
 
+            createApp(SearchVue, {
+                data: edit,
+                element: element,
+            }).component('search-component', SearchComponent).mount(element);
+        }
+    }
+
+    onload() {
         this.addTopBar({
             icon: "iconMark",
             title: this.i18n.topBarTitle,
             position: "right",
             callback: () => {
-                this.addSearchElement();
+                const edits = document.querySelectorAll(".layout__center [data-type='wnd'] > .layout-tab-container");
+                edits.forEach(edit => {
+                    this.addSearchElement(edit);
+                });
             }
         });
 
         this.addCommand({
             langKey: "showDialog",
             hotkey: "⌥⇧⌘F",
             callback: () => {
-                this.addSearchElement();
+                const edits = document.querySelectorAll(".layout__center [data-type='wnd'] > .layout-tab-container");
+                edits.forEach(edit => {
+                    this.addSearchElement(edit);
+                });
             },
         });
 
@@ -55,24 +76,4 @@ export default class PluginHighlight extends Plugin {
     uninstall() {
         console.log("uninstall");
     }
-
-    addSearchElement() {
-        const edits = document.querySelectorAll(".layout__center [data-type='wnd'] > .layout-tab-container");
-        console.log(edits);
-        edits.forEach(edit => {
-            const existingElement = edit.querySelector(`.${CLASS_NAME}`);
-
-            if (!existingElement) {
-                const element = document.createElement("div");
-                element.className = CLASS_NAME;
-                edit.appendChild(element);
-                console.log(element, edit);
-
-                createApp(SearchVue, {
-                    document: edit,
-                    element: element,
-                }).component('search-component', SearchComponent).mount(element);
-            }
-        });
-    }
 }