先看效果:
组件代码:
<template>
<div class="transport-marker-pop" v-if="isShow">
<div class="pop-container">
<div class="head">
<div class="title">图片</div>
<div class="close" @click="hide"></div>
</div>
<div class="mod">
<div class="image">
<img width="100%" height="100%" :src="url"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MarkerPop",
data() {
return {
isShow: false,
url: "",
};
},
methods: {
// 打开弹窗
show(item) {
this.url = item;
this.isShow = true;
},
// 关闭弹窗
hide() {
this.isShow = false;
},
},
};
</script>
<style lang="less" scoped>
.transport-marker-pop {
.pop-container {
width: 800px;
height: 400px;
background-image: url("./assets/video-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
position: fixed;
top: 290px;
right: 585px;
z-index: 120;
animation: showModScale 0.3s linear;
-webkit-animation: showModScale 0.3s linear;
word-break: break-all;
}
.head {
display: flex;
justify-content: space-between;
width: 96%;
align-items: center;
line-height: 40px;
margin: 5px auto;
border-bottom: 1px solid #7d7d7d;
.title {
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #00dfff;
margin-left: 390px;
}
.close {
width: 14px;
height: 14px;
background-image: url("./assets/close.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
cursor: pointer;
margin-right: 13px;
}
}
.mod {
width: 96%;
margin: 5px auto;
}
}
@keyframes showModScale {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
</style>
使用方法:
也可以放到全局,自行选择。
<template>
<div class="hello">
<img :src="img" alt="" @click="openImg(img)" style="width:200px;height:200px">
<img-pop ref="imgPop"></img-pop>
</div>
</template>
<script>
import imgPop from "./imgPop.vue";
export default {
name: 'HelloWorld',
components: {imgPop},
data() {
return {
img: "https://img0.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto&gp=0.jpg"
}
},
methods: {
openImg(url) {
this.$refs.imgPop.show(url);
},
}
}
</script>