打开/关闭搜索
打开/关闭菜单
43
1,113
4
9,243
LCD wiki
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

Widget:Home：修订间差异

来自LCD wiki
更多操作
可视化wikitext
创建页面，内容为“<noinclude> == 参数说明 == * tabs 分栏名称列表 * tabContents 分栏内容列表 ** title 要跳转的文档名称 ** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示 ** backimg 背面图片, 获取到鼠标焦点时显示 == 用法 == <pre><nowiki> {{#widget:Home | tabs = ["HDMI显示屏", "MHS-series显示屏", "GPIO显示屏"] | tabContents = [ [ { title: "3.5寸HDMI显示屏", coverimg: "http://www.lcdwik…”
 
无编辑摘要
 
（未显示2个用户的108个中间版本）
第1行： 第1行：
<noinclude>
<noinclude>
== 参数说明 ==
== 参数说明 ==
* boxid 对象id, 默认值: home-tab, 当需要在同一个页面上显示多个组件时,需要保证boxid唯一
* themeColor 主题颜色, 默认值: #36a5e8
* tabs 分栏名称列表
* tabs 分栏名称列表
* tabContents 分栏内容列表
* tabContents 分栏内容列表
** title 要跳转的文档名称
** title 要跳转的文档名称
** subtitle: 子标题,
** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
** backimg 背面图片, 获取到鼠标焦点时显示
** backimg 背面图片, 获取到鼠标焦点时显示
第14行： 第17行：
       {  
       {  
         title: "3.5寸HDMI显示屏",  
         title: "3.5寸HDMI显示屏",  
        subtitle: "子标题",
         coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg",  
         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" },     
         backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" },     
第20行： 第24行：
       {  
       {  
         title: "3.5寸HDMI显示屏",  
         title: "3.5寸HDMI显示屏",  
        subtitle: "子标题",
         coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg",  
         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" },     
         backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" },     
第26行： 第31行：
       {  
       {  
         title: "3.5寸HDMI显示屏",  
         title: "3.5寸HDMI显示屏",  
        subtitle: "子标题",
         coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg",  
         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" },     
         backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" },     
第37行： 第43行：
| tabContents = [
| 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"
      }, 
      {
        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"
      },
        {
        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显示屏",  
         title: "3.5寸HDMI显示屏",  
         coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg",  
         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" },     
         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"
      },     
     ],
     ],
     [
     [
第46行： 第101行：
         title: "3.5寸HDMI显示屏",  
         title: "3.5寸HDMI显示屏",  
         coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg",  
         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" },     
         backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg"  
      },     
    ],
  ]
}}
{{#widget:Home
| boxid = demo1
| tabs = ["HDMI显示屏", "MHS-series显示屏"]
| themeColor = #bc1d46
| 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"
      }, 
      {
        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"
      },
        {
        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"
      }, 
     ],
     ],
     [
     [
第52行： 第163行：
         title: "3.5寸HDMI显示屏",  
         title: "3.5寸HDMI显示屏",  
         coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg",  
         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" },     
         backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg"  
      },     
     ],
     ],
   ]
   ]
第60行： 第172行：
<onlyinclude>
<onlyinclude>
<html>
<html>
   <div id="app" style="display: none">
   <div  
     <v-app>
    id="<!--{$boxid|default:"home-tab"}-->"
       <v-main>
    class="v-application v-application--is-ltr theme--light"
    style="display: none;"
  >
     <v-container>
       <v-tabs
        dark
        v-model="tab"
        show-arrows
        grow
        center-active
        hide-slider
        active-class="active-tab"
        :background-color="themeColor"
      >
        <v-tab v-for="(tabName, index) in tabs" :key="index" style="text-transform: none;">
          {{tabName}}
        </v-tab>
      </v-tabs>
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="(content, index) in tabContents" :key="index">
         <v-container>
         <v-container>
           <v-tabs v-model="tab" right show-arrows>
           <v-row no-gutters>
             <v-tab v-for="(tabName, index) in tabs" :key="index">{{
             <v-col v-for="(item, idx) in content" :key="idx"
              tabName
             cols="6" sm="6" md="4" lg="3" xl="3"
             }}</v-tab>
            >
          </v-tabs>
               <a :href="baseURL() + encodeURIComponent(item.title)">
          <v-tabs-items v-model="tab">
                 <v-card class="ma-1 ma-md-2 ma-lg-3 ma-xl-3" elevation=1>
            <v-tab-item v-for="(content, index) in tabContents" :key="index">
               <div class="d-flex flex-wrap justify-space-around">
                 <v-card v-for="(item, idx) in content" :key="idx" flat>
                   <v-img
                   <v-img
                     dark
                     contain
                    style="background-color: white;"
                     :src="getImageUrl(item)"
                     :src="getImageUrl(item)"
                     :aspect-ratio="16/9"
                     :aspect-ratio="1/1"
                    width="265"
                    class="grey darken-4"
                     @mouseover="setHoveredItem(item)"
                     @mouseover="setHoveredItem(item)"
                     @mouseout="resetHoveredItem()"
                     @mouseout="resetHoveredItem()"
                   ></v-img>
                   ></v-img>
                   <v-card-subtitle style="text-align: center">
                   <div class="home-box-item-title">{{ item.title }}</div>
                    <a
                   <div class="home-box-item-subtitle">{{ item.subtitle }}</div>
                      :href="'/index.php?title=' + encodeURIComponent(item.title)"
                      >{{ item.title }}</a
                    >
                   </v-card-subtitle>
                 </v-card>
                 </v-card>
               </div>
               </a>
             </v-tab-item>
             <v-col/>
           </v-tabs-items>
          </v-row>
         </v-container>
           </v-container>
       </v-main>
         </v-tab-item>
     </v-app>
       </v-tabs-items>
     </v-container>
   </div>
   </div>
  <script src="/res/Common/js/vue.min.js"></script>
  <script src="/res/Common/js/vuetify.min.js"></script>
   <script>
   <script>
     window.onload=function () {
     if (typeof HomeBoxPool == "undefined") {
          let appDom = document.getElementById('app');
        HomeBoxPool = new Map();
          appDom.style.display = 'block';
    }
          new Vue({
    HomeBoxPool["<!--{$boxid|default:"home-tab"}-->"] = setInterval(() => {
            el: "#app",
      if (typeof Vuetify !== "undefined" && typeof Vue !== "undefined") {
            vuetify: new Vuetify(),
        clearInterval(HomeBoxPool["<!--{$boxid|default:"home-tab"}-->"]);
            methods: {
        let appDom = document.getElementById("<!--{$boxid|default:"home-tab"}-->");
              setHoveredItem(item) {
        appDom.style.display = 'block';
                this.hoveredItem = item;
        new Vue({
              },
          el: "#<!--{$boxid|default:"home-tab"}-->",
              resetHoveredItem() {
          vuetify: new Vuetify(),
                this.hoveredItem = null;
          mounted() {
              },
              setTimeout(()=>{this.preloadBackimg()}, 5000);
              getImageUrl(item) {
          },
                if (this.hoveredItem === item) {
          methods: {
                  if (item.backimg) {
            setHoveredItem(item) {
                    return item.backimg;
              this.hoveredItem = item;
                  }
            },
                }
            resetHoveredItem() {
                return item.coverimg;
              this.hoveredItem = null;
              },
            },
            getImageUrl(item) {
              if (this.$vuetify.breakpoint.mdAndUp && this.hoveredItem === item && item.backimg) {
                return item.backimg;
              }
              return item.coverimg;
             },
             },
             data: {
             baseURL(){
              tab: null,
               return /https?:\/\/[^\/]+\/(zh)(\/|$)/.test(window.location.href) ? '/zh/' : '/'
              tabs: <!--{$tabs}-->,
               tabContents: <!--{$tabContents}-->,
              hoveredItem: null,
             },
             },
           });
            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;
                  }
                })
              })
            }
           },
          data: {
            themeColor: "<!--{$themeColor|default:"#36a5e8"}-->",
            tab: null,
            tabs: <!--{$tabs}-->,
            tabContents: <!--{$tabContents}-->,
            hoveredItem: null,
          },
        });
 
      }
    }, 50);
   </script>
   </script>
  <style scoped>
    .home-box-item-title, .home-box-item-subtitle {
      text-align: center;
      font-size: 14px; /* 默认字体大小 */
      white-space: nowrap;        /* 防止文本换行 */
      overflow: hidden;          /* 隐藏超出范围的文本 */
      text-overflow: ellipsis;    /* 使用省略号表示超出文本 */
      max-width: 100%;            /* 设置最大宽度 */
    }
    .home-box-item-title {
      font-weight: bold;
      color: #313131
    }
    .home-box-item-subtitle {
      color: #666666
    }
    @media (min-width: 960px) {
      .home-box-item-title, .home-box-item-subtitle {
        font-size: 16px; /* 中屏幕及以上 */
      }
    }
    @media (min-width: 1280px) {
      .home-box-item-title, .home-box-item-subtitle{
        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>
</html>
</html>
</onlyinclude>
</onlyinclude>
</includeonly>
</includeonly>

2024年7月30日 (二) 15:04的最新版本

参数说明

  • 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" },    
    ],
  ]
}}

效果展示


取自“http://www.lcdwiki.com/zh/index.php?title=Widget:Home&oldid=9339”
目录
最后修改时间
此页面最后编辑于2024年7月30日 (星期二) 15:04。