Vue自定义图片点击放大效果
文章描述：
Vue自定义点击图片放大效果组件
放大后效果
vue页面
<template>
<div id="app">
<div class="container">
<!-- <img src="../../../public/static/images/xhd.jpg"/> -->
<!-- <img src="http://localhost:9528/static/img/xhd.1a461a40.jpg"/> -->
<div class="item">
<img :src="bigImgUrl" @click.self="showBigImage(bigImgUrl)" class="img"/>
</div>
<!--显示放大图片的组件-->
<BigImg :visible="photoVisible" :url="bigImgUrl" @closeClick="()=>{photoVisible=false}"></BigImg>
</div>
</div>
</template>
<script>
import BigImg from "@/views/debug/components/big-img";
export default {
name: 'App',
components:{
BigImg
},
data(){
return {
photoVisible:false,
bigImgUrl:"http://localhost:9528/static/img/xhd.1a461a40.jpg"
}
},
mounted(){
},
methods:{
closeClick(){
this.photoVisible = false;
this.bigImgUrl = '';
},
// 图片放大
showBigImage(e) {
if (e != "") {
this.photoVisible = true;
this.bigImgUrl = e;
}
},
}
}
</script>
<style lang="scss">
.container{
padding: 20px 20px;
}
.item{
width: 80px;
img{
width: 100%;
}
}
</style>
组件
<template>
<div v-show="visible" @click="closeClick" class="showPhoto">
<img class="img" :src="url" alt="图片加载失败" />
</div>
</template>
<script>
export default {
props: {
url: {
type: String,
default: "",
},
visible: {
type: Boolean,
default: false,
},
},
methods: {
closeClick() {
//子组件可以使用 $emit 触发父组件的自定义事件
this.$emit("closeClick");
},
},
};
</script>
<style lang="css" scoped>
.showPhoto {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}
.showPhoto .img {
display: block;
margin: auto 0;
max-width: 100%;
text-align: center;
}
</style>
发布时间：2024/04/19
发表评论