More actions
No edit summary |
No edit summary |
||
| Line 208: | Line 208: | ||
@mouseover="setHoveredItem(item)" | @mouseover="setHoveredItem(item)" | ||
@mouseout="resetHoveredItem()" | @mouseout="resetHoveredItem()" | ||
></v-img> | ></v-img> | ||
<div class="home-box-item-title">{{ item.title }}</div> | <div class="home-box-item-title">{{ item.title }}</div> | ||
| Line 244: | Line 242: | ||
}, | }, | ||
getImageUrl(item) { | getImageUrl(item) { | ||
if (this.hoveredItem === item | if (this.$vuetify.breakpoint.mdAndUp && this.hoveredItem === item && item.backimg) { | ||
return item.backimg; | |||
} | } | ||
return item.coverimg; | return item.coverimg; | ||
Revision as of 22:11, 29 July 2024
参数说明
- boxid 对象id, 默认值: home-tab, 当需要在同一个页面上显示多个组件时,需要保证boxid唯一
- themeColor 主题颜色, 默认值: #36a5e8
- tabs 分栏名称列表
- tabContents 分栏内容列表
- title 要跳转的文档名称
- subtitle: 子标题,
- coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
- backimg 背面图片, 获取到鼠标焦点时显示
用法
{{#widget:Home
| tabs = ["HDMI显示屏", "MHS-series显示屏", "GPIO显示屏"]
| tabContents = [
[
{
title: "3.5寸HDMI显示屏",
subtitle: "子标题",
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显示屏",
subtitle: "子标题",
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显示屏",
subtitle: "子标题",
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" },
],
]
}}
效果展示