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

2022-1-19

需求

在我的任务墙网站上打卡记录支持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';
        }
    },