VUE 使用Css实战训练之图片点击放大

需求

在我的任务墙网站上打卡记录支持html语言后,有时候就会展示图片,但是为了美观,进行了格式统一,但是有时候图片很大或很小,那么经过处理后的图片观看效果就很差,于是就要实现点击图片查看原图的功能,

非常常见的一个功能,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片

思路

首先对页面的结构进行拆分:

  • 有一个弹窗,在弹窗中显示大图;且弹窗默认是隐藏的
  • 主页面上可以放置很多图片,并添加点击事件
  • 点击之后,弹窗显示,并展示大图
  • 大图点击以下后,关闭弹窗

实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>小灰灰css学习笔记</title> 
<style>
#modal {
	display: none;
}
.modal {
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
}

.modal img {
    animation-name: zoom;
	animation-duration: 0.6s;
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}

.thum-img {
    float: left;
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}
</style>
	</head>
<body>
<!-- 先来实现弹窗 -->
<div style='position:fixed;width:100%;height:100%;background-color:rgb(0,0,0,0.65)' id='modal'>
<div class='modal' id='modalw'>
    <img id='bgImg' />
</div>
</div>


<!-- 下面则是主页内容,先只给几个图片 -->

<div>
    <img onclick='showBgImg(this)' class='thum-img' 
    src='http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
 	<img class='thum-img' src='http://imyjs.cn/2022/01/E36B46E2-02D7-4C45-B8A2-4887D1CA6588.jpeg' onclick='showBgImg(this)'/> 
</div>

<script>
    var modal = document.getElementById('modal');
    var bgImg = document.getElementById('bgImg');


    function showBgImg(e) {
		modal.style.display = 'block';
		bgImg.src = e.src;
	}

	bgImg.onclick = function() {
		modal.style.display = 'none';
	}
</script>
</body>
</html>

 

 

问题

在使用VUE时,需要注意一点就是,考虑vue实例生命周期加载问题,因为数据是从后台通过异步请求获取到的,所以需要使用vue生命周期的钩子函数updated,只有事先设置好的data变量,如arrData改变并且要在页面重新渲染{{ arrData }}完成之后,才会进updated方法,光改变arrData但不渲染页面是不会进的.

所以需要把js 写入到vue实例的updated钩子函数中:

updated: function () {
        var images = document.querySelectorAll('img');
        var div = document.querySelector('#modal');
        var bgImg = document.getElementById('bgImg');
        var _this = this;
        for (let i = 2; i < images.length; i++) {
            images[i].onclick = function() {
                div.style.display = 'block';
                bgImg.src = this.src;
                _this.$notify({
                        title: '提醒',
                        message: '~点击大图关闭哦~❤!',
                        type: 'success',
                        offset: 500,
                    });
            }
        }
        bgImg.onclick = function() {
            div.style.display = 'none';
        }
    },

 

 

补充

Vue中updated和watch的区别

watch:

1.仅仅是数据发生改变的时候会侦听到

2.只是会检测到你写在watch里的那些属性,没写的就不会触发

updated:

1.执行到它的时候时候是数据发生变化且界面更新完毕

3.所有的数据发生变化都会调用

4.每次触发的代码都是同一个

微信关注

WeChat

阅读剩余
THE END