如何在 Vue 中实现一个包含图像和蒙层效果的组件？这个组件根据某个条件显示或隐藏蒙层，用于表示图像是否已读。

 

1. 创建基础模板

首先，我们在模板中使用 div 包裹我们的图像组件 GraphImage，并为最外层 div 设置 position: relative。

<div style="position: relative"><GraphImage :regNo="item.regNo" :showList="false" :zoom="true":modalWidth="400" :height="200" />//此处是图片</div>

2. 添加条件渲染的蒙层

接下来，我们使用 Vue 的条件渲染 v-if 指令，在满足条件时显示蒙层

    <div v-if="item.readFlag == '1'" class="overlay">已读</div>

这段代码确保只有当 item.readFlag 等于 '1' 时，蒙层才会显示。

3. 定义蒙层样式

最后，我们添加蒙层的 CSS 样式，使其覆盖图像并显示居中的“已读”文字。

.overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(128, 128, 128, 0.5); /* 半透明黑色蒙层 */display: flex;align-items: center;justify-content: center;color: white;z-index: 1;font-size: 20px;font-weight: bold;
}