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

理想 • 2022-01-19 • CSS, 教程记录, 编程代码, 问题解决 • 382 阅读

需求

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

打赏微海报分享
本站为非盈利性站点，所有资源、文章等仅供学习参考，并不贩卖软件且不存在任何商业目的及用途，如果您访问和下载某文件，表示您同意只将此文件用于参考、学习而非其他用途。
本站所发布的一切软件资源、文章内容、页面内容可能整理来自于互联网，在此郑重声明本站仅限用于学习和研究目的；并告知用户不得将上述内容用于商业或者非法用途，否则一切后果请用户自负。
如果本站相关内容有侵犯到您的合法权益，请仔细阅读本站公布的投诉指引页相关内容联系我，依法依规进行处理！
作者：理想
链接：https://www.imyjs.cn/archives/534
THE END
二维码
VUE 使用Css实战训练之图片点击放大
需求 在我的任务墙网站上打卡记录支持html语言后，……
<<上一篇
下一篇>>
文章目录
关闭
目 录