vue:图片里面覆盖了3个局部遮罩层,点击遮罩层可显示对应的文字。(附上实例)
时间: 2024-05-02 22:18:56 浏览: 76
以下是一个示例代码,其中使用了vue的v-for指令和@click事件监听器来实现图片覆盖了3个局部遮罩层,点击遮罩层可显示对应的文字的效果:
```
<template>
<div class="image-container">
<div v-for="(item, index) in items" :key="index" class="image-item">
<img :src="item.image" alt="">
<div class="mask" :class="'mask-' + index" @click="showText(index)">
<div v-if="show[index]" class="text">{{ item.text }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ image: 'https://picsum.photos/id/1/400/300', text: '这是第一张图片' },
{ image: 'https://picsum.photos/id/2/400/300', text: '这是第二张图片' },
{ image: 'https://picsum.photos/id/3/400/300', text: '这是第三张图片' }
],
show: [false, false, false]
}
},
methods: {
showText(index) {
this.show[index] = !this.show[index]
}
}
}
</script>
<style>
.image-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
}
.image-item {
position: relative;
width: 30%;
margin-bottom: 20px;
}
.image-item img {
max-width: 100%;
height: auto;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.mask:hover {
opacity: 1;
}
.text {
color: #fff;
font-size: 18px;
text-align: center;
max-width: 80%;
margin: 0 auto;
}
</style>
```
阅读全文