1、在component新建一个文件,例如BigImg.vue,然后加入以下代码
<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.9); 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>
2、在你用到放大的页面,
<template> <div> <img @click.self="showBigImage($event)" :src="pic" alt="" /> <BigImg :visible="photoVisible" :url="bigImgUrl" @closeClick=" () => { photoVisible = false; } " ></BigImg> </div> </template> import BigImg from "../../components/BigImg"; //引入 export default { data(){ bigImgUrl:"", photoVisible:false, } components: { //注册 BigImg, }, methods:{ // 放大图片 showBigImage(e) { //点击图片函数,点击后,把photoVisible设置成true if (e != "") { this.photoVisible = true; this.bigImgUrl = e.currentTarget.src; } }, } }
vue实现点击图片放大
最新推荐文章于 2024-04-17 05:10:14 发布