更多操作
无编辑摘要 标签:已被回退 |
无编辑摘要 |
||
(未显示同一用户的2个中间版本) | |||
第234行: | 第234行: | ||
el: "#<!--{$boxid|default:"home-tab"}-->", | el: "#<!--{$boxid|default:"home-tab"}-->", | ||
vuetify: new Vuetify(), | vuetify: new Vuetify(), | ||
mounted() { | |||
setTimeout(()=>{this.preloadBackimg()}, 5000); | |||
}, | |||
methods: { | methods: { | ||
setHoveredItem(item) { | setHoveredItem(item) { | ||
第249行: | 第252行: | ||
baseURL(){ | baseURL(){ | ||
return /https?:\/\/[^\/]+\/(zh)(\/|$)/.test(window.location.href) ? '/zh/' : '/' | return /https?:\/\/[^\/]+\/(zh)(\/|$)/.test(window.location.href) ? '/zh/' : '/' | ||
}, | |||
preloadBackimg(){ | |||
this.tabContents.forEach(contents => { | |||
contents.forEach(item => { | |||
if (this.$vuetify.breakpoint.mdAndUp && item.backimg) { | |||
console.log("Preload backimgs", item.backimg) | |||
const img = new Image(); | |||
img.src = item.backimg; | |||
} | |||
}) | |||
}) | |||
} | } | ||
}, | }, | ||
第259行: | 第273行: | ||
}, | }, | ||
}); | }); | ||
} | } | ||
}, 50); | }, 50); | ||
第310行: | 第325行: | ||
} | } | ||
</style> | </style> | ||
</html> | </html> | ||
</onlyinclude> | </onlyinclude> | ||
</includeonly> | </includeonly> |
2024年7月30日 (二) 15:04的最新版本
参数说明
- 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" }, ], ] }}
效果展示