Widget:Home：修订间差异

2024年7月26日 (五) 18:27的版本

参数说明

tabs 分栏名称列表
tabContents 分栏内容列表
- title 要跳转的文档名称
- coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
- backimg 背面图片, 获取到鼠标焦点时显示

用法

{{#widget:Home
| tabs = ["HDMI显示屏", "MHS-series显示屏", "GPIO显示屏"]
| tabContents = [
    [
      { 
        title: "3.5寸HDMI显示屏", 
        coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", 
        backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" },    
    ],
    [
      { 
        title: "3.5寸HDMI显示屏", 
        coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", 
        backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" },    
    ],
    [
      { 
        title: "3.5寸HDMI显示屏", 
        coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", 
        backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" },    
    ],
  ]
}}

@@ 第60行： / 第60行： @@
 <onlyinclude>
 <html>
-   <div id="app" style="display: none">
+   <div id="homeBox" style="display: none">
      <v-app>
        <v-main>
@@ 第97行： / 第97行： @@
    </div>
    <script>
-     window.addEventListener('load', function () {
+     let homeboxT = setInterval(() => {
-          let appDom = document.getElementById('app');
+      if (typeof Vuetify !== "undefined" && typeof Vue !== "undefined") {
-          appDom.style.display = 'block';
+        clearInterval(homeboxT);
-          new Vue({
+        let appDom = document.getElementById('homeBox');
-            el: "#app",
+        appDom.style.display = 'block';
-            vuetify: new Vuetify(),
+        new Vue({
-            methods: {
+          el: "#homeBox",
-              setHoveredItem(item) {
+          vuetify: new Vuetify(),
-                this.hoveredItem = item;
+          methods: {
-              },
+            setHoveredItem(item) {
-              resetHoveredItem() {
+              this.hoveredItem = item;
-                this.hoveredItem = null;
+            },
-              },
+            resetHoveredItem() {
-              getImageUrl(item) {
+              this.hoveredItem = null;
-                if (this.hoveredItem === item) {
+            },
-                  if (item.backimg) {
+            getImageUrl(item) {
-                    return item.backimg;
+              if (this.hoveredItem === item) {
-                  }
+                if (item.backimg) {
+                  return item.backimg;
                  }
-                return item.coverimg;
+              }
-              },
+              return item.coverimg;
-            },
-            data: {
-              tab: null,
-              tabs: <!--{$tabs}-->,
-              tabContents: <!--{$tabContents}-->,
-              hoveredItem: null,
              },
-           });
+           },
+          data: {
+            tab: null,
+            tabs: <!--{$tabs}-->,
+            tabContents: <!--{$tabContents}-->,
+            hoveredItem: null,
+          },
          });
+      }
+    }, 100);
    </script>
 </html>
 </onlyinclude>
 </includeonly>

2024年7月26日 (五) 18:27的版本

参数说明

用法

效果展示