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
← Older editNewer edit →
VisualWikitext
No edit summary
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 分栏名称列表
* tabs 分栏名称列表
  * tabContents 分栏内容列表
* tabContents 分栏内容列表
  ** title 要跳转的文档名称
** title 要跳转的文档名称
  ** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
  ** backimg 背面图片, 获取到鼠标焦点时显示
** 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" },   
    ],
  ]
}}
</noinclude>
</noinclude>
<includeonly>
<includeonly>
<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: {
                tab: null,
                tabs: <!--{$tabs}-->,
                tabContents: <!--{$tabContents}-->,
                hoveredItem: null,
               },
               },
             });
             },
          }
            data: {
    </script>
              tab: null,
  </html>
              tabs: <!--{$tabs}-->,
              tabContents: <!--{$tabContents}-->,
              hoveredItem: null,
            },
          });
        }
  </script>
</html>
</onlyinclude>
</onlyinclude>
</includeonly>
</includeonly>

Revision as of 22:22, 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=4766"
Contents
Last modified
This page was last edited on 17 July 2024, at 22:22.