Vue.js - 带有自定义叠加层的自定义照片网格

Posted 2023-02-22

【中文标题】Vue.js - 带有自定义叠加层的自定义照片网格

【英文标题】：Vue.js - custom photo grid with custom overlay

【发布时间】：2019-03-05 09:29:56

【问题描述】：

如何制作带有自定义叠加层的照片网格（每张照片都是一张卡片）。 当用户悬停照片时，他将看到详细信息叠加。 这样用户就会看到照片和上面的详细信息。

我尝试使用“美化”和“Bootstrap-Vue”来做到这一点 并没有成功。

我要查找的示例：example website

【问题讨论】：

为此尝试 html、CSS 和 javascript

你能提供你尝试过的作品吗

【参考方案1】：

只需构建您的项目网格 - 使用引导程序“卡片”组件和网格系统为它们设置样式，使其成为一个网格。

然后只需将此自定义 vue 组件与 v-for 一起使用，然后在此元素上绑定 @mouseover + @mouseleave 以更改悬停属性的状态或您喜欢的任何名称。然后根据悬停状态更改组件中的文本或结构。

这里的简单演示： http://jsfiddle.net/e8y0hLps/

【讨论】：

谢谢！ v-if 非常有用，但我想在卡片上添加细节，而不是切换元素。有一种“Vue”方法可以做到这一点，而不是使用 Css？