Widget:Home: Difference between revisions

Revision as of 15:07, 30 July 2024

参数说明

boxid 对象id, 默认值: home-tab, 当需要在同一个页面上显示多个组件时,需要保证boxid唯一
themeColor 主题颜色, 默认值: #36a5e8
tabs 分栏名称列表
tabContents 分栏内容列表
- title 要跳转的文档名称
- subtitle: 子标题,
- coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
- backimg 背面图片, 获取到鼠标焦点时显示

用法

{{#widget:Home
| tabs = ["HDMI显示屏", "MHS-series显示屏", "GPIO显示屏"]
| tabContents = [
    [
      { 
        title: "3.5寸HDMI显示屏", 
        subtitle: "子标题", 
        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显示屏", 
        subtitle: "子标题", 
        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显示屏", 
        subtitle: "子标题", 
        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" },    
    ],
  ]
}}

@@ Line 179: / Line 179: @@
      <v-container>
        <v-tabs
+        dark
          v-model="tab"
          show-arrows
          grow
          center-active
-         dark
+         hide-slider
+        active-class="active-tab"
          :background-color="themeColor"
        >
-         <v-tab v-for="(tabName, index) in tabs" :key="index">{{
+         <v-tab v-for="(tabName, index) in tabs" :key="index" style="text-transform: none;">
-          tabName
+          {{tabName}}
-         }}</v-tab>
+         </v-tab>
        </v-tabs>
        <v-tabs-items v-model="tab">
@@ Line 200: / Line 202: @@
                  <v-card class="ma-1 ma-md-2 ma-lg-3 ma-xl-3" elevation=1>
                    <v-img
-                     dark
+                     contain
+                    style="background-color: white;"
                      :src="getImageUrl(item)"
                      :aspect-ratio="1/1"
-                    class="grey darken-4"
                      @mouseover="setHoveredItem(item)"
                      @mouseout="resetHoveredItem()"
-                    @touchstart="setHoveredItem(item)"
-                    @touchend="resetHoveredItem()"
                    ></v-img>
                    <div class="home-box-item-title">{{ item.title }}</div>
@@ Line 234: / Line 234: @@
            el: "#<!--{$boxid|default:"home-tab"}-->",
            vuetify: new Vuetify(),
+          mounted() {
+              setTimeout(()=>{this.preloadBackimg()}, 5000);
+          },
            methods: {
              setHoveredItem(item) {
@@ Line 242: / Line 245: @@
              },
              getImageUrl(item) {
-               if (this.hoveredItem === item) {
+               if (this.$vuetify.breakpoint.mdAndUp && this.hoveredItem === item && item.backimg) {
-                if (item.backimg) {
+                return item.backimg;
-                  return item.backimg;
-                }
                }
                return item.coverimg;
@@ Line 251: / Line 252: @@
              baseURL(){
                return /https?:\/\/[^\/]+\/(zh)(\/|$)/.test(window.location.href) ? '/zh/' : '/'
+            },
+            preloadBackimg(){
+              this.tabContents.forEach(contents => {
+                contents.forEach(item => {
+                  if (this.$vuetify.breakpoint.mdAndUp && item.backimg) {
+                    console.log("Preload backimgs", item.backimg)
+                    const img = new Image();
+                    img.src = item.backimg;
+                  }
+                })
+              })
              }
            },
@@ Line 261: / Line 273: @@
            },
          });
        }
      }, 50);
@@ Line 294: / Line 307: @@
          font-size: 18px; /* 大屏幕及以上 */
        }
+    }
+    .active-tab {
+      font-weight: bold;
+      font-size: 18px;
+    }
+    .active-tab::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(255, 255, 255, 0.3); /* 透明白色 */
+      pointer-events: none; /* 让蒙版不影响鼠标事件 */
      }
    </style>

Revision as of 15:07, 30 July 2024

参数说明

用法

效果展示