modal.vue
<template>
<div>
<Imgs @clickit="viewImg" :imgSrc="imgSrc"></Imgs>
<div @click="clickImg">查看</div>
</div>
</template>
<script>
import Imgs from "./components/img.vue";
export default {
data() {
return {
imgSrc: "",
};
},
mounted() {},
components: {
Imgs,
},
methods: {
viewImg() {
this.imgSrc = "";
},
clickImg() {
// 获取当前图片地址
this.imgSrc = "../assets/image/2.jpg";
},
},
};
</script>
<style lang="scss" scoped>
</style>
img.vue组件
<template>
<!-- 遮罩层 -->
<div
@click="bigImg"
:class="imgSrc ? 'img-view-1' : 'img-view-2'"
:style="{
height: imgSrc ? 'calc(100% - 60px)' : '0%',
width: imgSrc ? '100%' : '0%',
'border-radius': imgSrc ? ' 0 0 0 0' : '5%',
background: imgSrc ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
}"
>
<!-- 图片 -->
<div class="bgDiv" v-if="imgSrc">
<div class="imgDiv">
<!-- 关闭按钮 -->
<div class="image-view-close" v-show="imgSrc" @click="bigImg">
<i class="el-icon-close"></i>
</div>
<img src="../../assets/image/2.jpg" :style="{ width: test + '%' }" />
<div class="textDiv">1</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["imgSrc"],
data() {
return {
test: 100,
};
},
methods: {
bigImg() {
// 发送关闭事件
this.$emit("clickit");
},
},
};
</script>
<style scoped>
/*遮罩层样式*/
.img-view-1 {
position: fixed;
top: 60px;
left: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
}
.img-view-2 {
position: fixed;
top: 50%;
left: 50%;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
}
.image-view-close {
width: 60px;
height: 60px;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0px;
right: 0;
border-radius: 0 0 0 100%;
cursor: pointer;
}
.image-view-close > i {
font-size: 30px;
color: #fff;
margin: 10px 0 0 20px;
}
.image-view-close:hover {
background: rgba(0, 0, 0, 0.5);
}
.image-view-slider {
position: absolute;
top: calc(50% - 260px);
right: 40px;
}
.bgDiv {
width: 500px;
}
.imgDiv {
width: 100%;
position: relative;
}
.textDiv {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
</style>
点击图片,图片放大显示
最新推荐文章于 2023-07-04 10:56:24 发布
这篇博客详细介绍了如何使用Vue.js创建一个用于查看图片的组件。组件包含一个遮罩层,点击图片可以打开大图预览,并通过点击关闭按钮或者再次点击图片关闭预览。同时,展示了如何在父组件和子组件之间传递数据以及触发事件。
摘要由CSDN通过智能技术生成