打开/关闭搜索
搜索
打开/关闭菜单
43
1,113
4
9,249
LCD wiki
导航
首页
最近更改
帮助
特殊页面
上传文件
站点
English Site
中文站点
notifications
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。
user-interface-preferences
个人工具
登录
查看“Widget:Home”的源代码
来自LCD wiki
更多操作
←
Widget:Home
因为以下原因,您没有权限编辑该页面:
您请求的操作仅限属于该用户组的用户执行:
用户
您没有权限编辑
Widget
命名空间内的页面。
您可以查看和复制此页面的源代码。
<noinclude> == 参数说明 == * tabs 分栏名称列表 * tabContents 分栏内容列表 ** title 要跳转的文档名称 ** coverimg 封面图片, 默认显示, 失去鼠标焦点时显示 ** backimg 背面图片, 获取到鼠标焦点时显示 == 用法 == <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/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" }, ], ] }} </nowiki></pre> == 效果展示 == {{#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> <includeonly> <onlyinclude> <html> <div id="homeBox" style="display: none"> <v-app> <v-main> <v-container> <v-tabs v-model="tab" right show-arrows> <v-tab v-for="(tabName, index) in tabs" :key="index">{{ tabName }}</v-tab> </v-tabs> <v-tabs-items v-model="tab"> <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 dark :src="getImageUrl(item)" :aspect-ratio="16/9" width="265" class="grey darken-4" @mouseover="setHoveredItem(item)" @mouseout="resetHoveredItem()" ></v-img> <v-card-subtitle style="text-align: center"> <a :href="'/index.php?title=' + encodeURIComponent(item.title)" >{{ item.title }}</a > </v-card-subtitle> </v-card> </div> </v-tab-item> </v-tabs-items> </v-container> </v-main> </v-app> </div> <script> let homeboxT = setInterval(() => { if (typeof Vuetify !== "undefined" && typeof Vue !== "undefined") { clearInterval(homeboxT); let appDom = document.getElementById('homeBox'); appDom.style.display = 'block'; new Vue({ el: "#homeBox", vuetify: new Vuetify(), methods: { setHoveredItem(item) { this.hoveredItem = item; }, resetHoveredItem() { this.hoveredItem = null; }, getImageUrl(item) { if (this.hoveredItem === item) { if (item.backimg) { return item.backimg; } } return item.coverimg; }, }, data: { tab: null, tabs: <!--{$tabs}-->, tabContents: <!--{$tabContents}-->, hoveredItem: null, }, }); } }, 100); </script> </html> </onlyinclude> </includeonly>
返回
Widget:Home
。