移动端图片放大实现

版权声明：转载请注明来源 https://blog.csdn.net/weixin_41829196/article/details/88790748

html:

<template>
	<div id="knowledge-base">
		<div class="knowledge-title">{{documentName}}</div>
		<!--<div class="knowledge-path">知识库-后台应用-端口</div>-->
		<div class="knowledge-sub">{{documentSubtitle}}</div>
		<div class="content" v-html="documentContent">
			<!--{{documentContent}}-->
		</div>
	</div>
</template>

js:

	var imgArr = document.querySelectorAll('img');
				console.log(imgArr);
				imgArr.forEach(function (item) {
					item.addEventListener('click',function () {
						console.log(this,111);
						var temp = this.src;
						console.log(temp);
						var objE = document.createElement("div");
						objE.innerHTML = '<div class="bgM" >' +
							'<img src="'+temp+'"  id="img_scan" class="img-custom-img2"/>' +
							'</div>';
						document.body.appendChild(objE.children[0]);
						//退出图片预览事件
						var $bg = document.querySelector(".bgM");
						$bg.onclick = function() {
							var dm = document.querySelector(".bgM");
							document.body.removeChild(dm);
						}
						//阻止事件冒泡
						var $img = document.querySelector(".img-custom-img2");
						$img.onclick = function(event) {
							event.stopPropagation();
						}
					})
					// console.log(item,123);
				})

css:

.bgM{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  z-index: 1000;
  background-color: rgba(0,0,0,0.85);
  overflow: hidden;
}
.bgM img{
  width: 100%;
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  z-index: 1001;
  margin: auto;
}