ToB企服应用市场:ToB评测及商务社交产业平台

标题: 蒙层（css） [打印本页]

---

作者: tsx81428    时间: 2024-6-11 09:21
标题: 蒙层（css）
 如何在 Vue 中实现一个包罗图像和蒙层效果的组件？这个组件根据某个条件表现或隐蔽蒙层，用于表示图像是否已读。

 
1. 创建基础模板

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

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

复制代码

2. 添加条件渲染的蒙层

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

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

复制代码

这段代码确保只有当 item.readFlag 等于 '1' 时，蒙层才会表现。
3. 定义蒙层样式

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

1. .overlay {
2.   position: absolute;
3.   top: 0;
4.   left: 0;
5.   width: 100%;
6.   height: 100%;
7.   background-color: rgba(128, 128, 128, 0.5); /* 半透明黑色蒙层 */
8.   display: flex;
9.   align-items: center;
10.   justify-content: center;
11.   color: white;
12.   z-index: 1;
13.   font-size: 20px;
14.   font-weight: bold;
15. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4