More actions
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"> | |||
<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> | |||
window.onload=function () { | |||
let appDom = document.getElementById('app'); | |||
appDom.style.display = 'block'; | |||
new Vue({ | |||
el: "#app", | |||
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, | |||
}, | |||
}); | |||
} | |||
</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 背面图片, 获取到鼠标焦点时显示