Toggle search
Toggle menu
13
831
5
4,866
LCD wiki
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Widget:Home: Difference between revisions

From LCD wiki
More actions
Newer edit →
VisualWikitext
Created page with "<noinclude> == 用法 == <pre> <nowiki> {{#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/th..."
 
No edit summary
Line 1: Line 1:
<noinclude>
<noinclude>
== 用法 ==
  == 用法 ==
<pre>
  <pre>
<nowiki>
    <nowiki>
{{#widget:Home
    {{#widget:Home
| tabs = ["HDMI显示屏", "MHS-series显示屏", "GPIO显示屏"]
    | tabs = ["HDMI显示屏", "MHS-series显示屏", "GPIO显示屏"]
| tabContents = [
    | tabContents = [
    [
        [
      {  
          {  
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显示屏",  
            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显示屏",  
            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" },     
    ],
        ],
  ]
      ]
}}
    }}
</nowiki>
    </nowiki>
</pre>
  </pre>
  == 参数说明 ==
  * tabs 分栏名称列表
  * tabContents 分栏内容列表
  ** title 要跳转的文档名称
  ** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
  ** backimg 背面图片, 获取到鼠标焦点时显示
</noinclude>
</noinclude>
<onlyinclude>
<onlyinclude>
<html>
  <html>
  <div id="app" style="display: none">
    <div id="app" style="display: none">
    <v-app>
      <v-app>
      <v-main>
        <v-main>
        <v-container>
          <v-container>
          <v-tabs v-model="tab" right show-arrows>
            <v-tabs v-model="tab" right show-arrows>
            <v-tab v-for="(tabName, index) in tabs" :key="index">{{
              <v-tab v-for="(tabName, index) in tabs" :key="index">{{
              tabName
                tabName
            }}</v-tab>
              }}</v-tab>
          </v-tabs>
            </v-tabs>
          <v-tabs-items v-model="tab">
            <v-tabs-items v-model="tab">
            <v-tab-item v-for="(content, index) in tabContents" :key="index">
              <v-tab-item v-for="(content, index) in tabContents" :key="index">
              <div class="d-flex flex-wrap justify-space-around">
                <div class="d-flex flex-wrap justify-space-around">
                <v-card v-for="(item, idx) in content" :key="idx" flat>
                  <v-card v-for="(item, idx) in content" :key="idx" flat>
                  <v-img
                    <v-img
                    dark
                      dark
                    :src="getImageUrl(item)"
                      :src="getImageUrl(item)"
                    :aspect-ratio="16/9"
                      :aspect-ratio="16/9"
                    width="265"
                      width="265"
                    class="grey darken-4"
                      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">
                    <v-card-subtitle style="text-align: center">
                    <a
                      <a
                      :href="'/index.php?title=' + encodeURIComponent(item.title)"
                        :href="'/index.php?title=' + encodeURIComponent(item.title)"
                      >{{ item.title }}</a
                        >{{ item.title }}</a
                    >
                      >
                  </v-card-subtitle>
                    </v-card-subtitle>
                </v-card>
                  </v-card>
              </div>
                </div>
            </v-tab-item>
              </v-tab-item>
          </v-tabs-items>
            </v-tabs-items>
        </v-container>
          </v-container>
      </v-main>
        </v-main>
    </v-app>
      </v-app>
  </div>
    </div>


  <script>
    <script>
    window.onload=function () {
      window.onload=function () {
      let appDom = document.getElementById('app');
            let appDom = document.getElementById('app');
      appDom.style.display = 'block';
            appDom.style.display = 'block';
      new Vue({
            new Vue({
        el: "#app",
              el: "#app",
        vuetify: new Vuetify(),
              vuetify: new Vuetify(),
        methods: {
              methods: {
          setHoveredItem(item) {
                setHoveredItem(item) {
            this.hoveredItem = item;
                  this.hoveredItem = item;
          },
                },
          resetHoveredItem() {
                resetHoveredItem() {
            this.hoveredItem = null;
                  this.hoveredItem = null;
          },
                },
          getImageUrl(item) {
                getImageUrl(item) {
            if (this.hoveredItem === item) {
                  if (this.hoveredItem === item) {
              if (item.backimg) {
                    if (item.backimg) {
                return item.backimg;
                      return item.backimg;
              }
                    }
            }
                  }
            return item.coverimg;
                  return item.coverimg;
          },
                },
        },
              },
        data: {
              data: {
          tab: null,
                tab: null,
          tabs: <!--{$tabs}-->,
                tabs: <!--{$tabs}-->,
          tabContents: <!--{$tabContents}-->,
                tabContents: <!--{$tabContents}-->,
          hoveredItem: null,
                hoveredItem: null,
        },
              },
      });
            });
    }
          }
  </script>
    </script>
</html>
  </html>
</onlyinclude>
</onlyinclude>

Revision as of 22:10, 17 July 2024

 == 用法 ==

    
    {{#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" },    
        ],
      ]
    }}
    
  
 == 参数说明 ==
 * tabs 分栏名称列表
 * tabContents 分栏内容列表
 ** title 要跳转的文档名称
 ** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
 ** backimg 背面图片, 获取到鼠标焦点时显示
Retrieved from "http://www.lcdwiki.com/index.php?title=Widget:Home&oldid=4761"
Last modified
This page was last edited on 17 July 2024, at 22:10.