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

Question

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

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

我要查找的示例：example website

Answer 1

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

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

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