More actions
No edit summary |
No edit summary |
||
Line 60: | Line 60: | ||
<onlyinclude> | <onlyinclude> | ||
<html> | <html> | ||
<div id=" | <div id="homeBox" style="display: none"> | ||
<v-app> | <v-app> | ||
<v-main> | <v-main> | ||
Line 97: | Line 97: | ||
</div> | </div> | ||
<script> | <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> | </script> | ||
</html> | </html> | ||
</onlyinclude> | </onlyinclude> | ||
</includeonly> | </includeonly> |
Revision as of 18:59, 20 July 2024
参数说明
- tabs 分栏名称列表
- tabContents 分栏内容列表
- title 要跳转的文档名称
- coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
- 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" }, ], ] }}
效果展示