Pichome/dzz/details/template/pc/components/image.htm

<div class="picture-box">
	<template v-if="imagesData.iniframe">
		<template v-if="DocumentThemeColor == 'dark'">
			<iframe 
				style="border: 0px;"
				:src="imagesData.iniframe+'&theme=dark'" 
				width="100%" 
				height="100%"></iframe>
		</template>
		<template v-else>
			<iframe 
				style="border: 0px;"
				:src="imagesData.iniframe" 
				width="100%" 
				height="100%"></iframe>
		</template>
		
	</template>
	<template v-else>
		<el-scrollbar class="page-component__scroll" id="ImgScroll" ref="scrollImg" @mousedown.native="imageDrag">
			<!-- <img
				:src="imagesData.icondata"
				class="image-viewer__img thumbnail" /> -->
			<img
				v-show="imagesSize.show"
				@load="imageload"
				:src="imagesData.originalimg?imagesData.originalimg:imagesData.icondata"
				class="image-viewer__img max" />
		</el-scrollbar>
	</template>
</div>
<script type="text/javascript">
	var ImageMixin = {
		methods:{
			imageSize(proportion){
				var self = this;
				// if(self.ImgParam.LoadFirst){
				// 	self.ImgParam.LoadFirst = false;
				// 	return false;
				// }
				var ImgScroll = document.getElementById('ImgScroll');
				var img = document.querySelector('.image-viewer__img');
				var wrap = document.querySelector('#ImgScroll .el-scrollbar__wrap');
				var canva = document.querySelector('#ImgScroll .el-scrollbar__view');
				if(this.imagesData.opentype == 'other'){
					var width = parseFloat(this.imagesData.iconwidth);
					var height = parseFloat(this.imagesData.iconheight);
				}else{
					var width = parseFloat(this.imagesSize.width);
					var height = parseFloat(this.imagesSize.height);
				}
				var fwidth = width*proportion;
				var fheight = height*proportion;
			
				var owidth = fwidth-img.clientWidth;
				var oheight = fheight-img.clientHeight;
				var pwidth = ImgScroll.clientWidth-(ImgScroll.clientWidth/5);
				var pheight = ImgScroll.clientHeight-(ImgScroll.clientHeight/5);
				canva.style.lineHeight = ImgScroll.clientHeight+'px';
				if(fwidth>ImgScroll.clientWidth){
					img.style.cssText = 'max-width: "";width:'+fwidth+'px';
					wrap.scrollLeft += owidth/2;
					
				}else{
					img.style.cssText = 'max-width: "";width:'+fwidth+'px';
				}
				if(fheight>ImgScroll.clientHeight){
					img.style.cssText = 'max-height: "";height:'+fheight+'px';
					wrap.scrollTop += oheight/2;
				}else{
					img.style.cssText = 'max-height: "";height:'+fheight+'px';
				}
				if(fheight>ImgScroll.clientHeight || fwidth>ImgScroll.clientWidth){
					
					ImgScroll.classList.add = 'move';
				}else{
					ImgScroll.classList.remove('move');
				}
				img.classList.remove('max');
				if(self.$refs.scrollImg){
					self.$refs.scrollImg.update();
				}
			},
			imageproportion(){
				var self = this;
				var val = self.ImgParam.proportion;
				this.ImgParam.fproportion = Math.round(val*100);
				self.$nextTick(function(){
					self.imageSize(val);
				});
			},
			imageTransform(){
				var self = this;
				var str = '';
				if(self.ImgParam.rotate != 0){
					str += ' rotate('+self.ImgParam.rotate+'deg)';
				}
				if(self.ImgParam.scaleX != 0){
					str += ' scaleX('+self.ImgParam.scaleX+')';
				}
				if(self.ImgParam.scaleY != 0){
					str += ' scaleY('+self.ImgParam.scaleY+')';
				}
				document.querySelector('.image-viewer__img').style.transform = str;
			},
			imageDrag(e){//图片移动
				var self = this;
				var oDiv = document.getElementById('ImgScroll');
				var oImg = document.querySelector('.image-viewer__img');
				var wrap = oDiv.querySelector('.el-scrollbar__wrap');
				e = e ? e : window.event;
				oDiv.classList.add = 'activemove';
				var lastClientX = e.clientX;
				var lastClientY = e.clientY;
				document.onmousemove = function(e){
					e = e ? e : window.event;
					var ClientX = e.clientX;
					var ClientY = e.clientY;
							
					if(oImg.clientWidth>oDiv.clientWidth){
						wrap.scrollLeft -=(- lastClientX + (lastClientX=ClientX));
					}
					if(oImg.clientHeight>oDiv.clientHeight){
						var num  = (- lastClientY + (lastClientY=ClientY));
						wrap.scrollTop -=num;
					}
					return false; //阻止默认事件或冒泡  
				}
				document.onmouseup = function(){
					oDiv.classList.remove('activemove');
					document.onmousemove = null;
					document.onmouseup = null;
				};


				
			},
			imageload(){
				let img = document.querySelector('.image-viewer__img.max');
				if(img){
					img.classList.remove('opacity');
				}
			},
			async getImageSizeByUrl(callback){
				let image = new Image();
				image.src = this.imagesData.originalimg;
				image.onload = await function () {
					callback({
						width: image.width,
						height: image.height
					});
				};
				image.onerror = await function () {
					callback({
						width: 0,
						height: 0
					});
				};
				
			},
			imageSet(){
				var self = this;
				let imagewidth = 0;
				let imageheight = 0;
				this.getImageSizeByUrl( function(param){
					let imageswidth = param.width;
					let imagesheight = param.height;
					if(imageswidth == 0 && imagesheight == 0){
						imageswidth = self.imagesData.width;
						imagesheight = self.imagesData.height;
					}
					self.imagesSize.width = imageswidth;
					self.imagesSize.height = imagesheight;
					var Bw = document.getElementById('ImgScroll').clientWidth;
					var Bh = document.getElementById('ImgScroll').clientHeight;
					var slider = document.querySelector('.el-slider').clientWidth;
					var Lw = 0;
					var Lh = 0;
					var proportion = 0;
					if(self.imagesData.opentype == 'other'){
						var Lw = parseFloat(self.imagesData.iconwidth);
						var Lh = parseFloat(self.imagesData.iconheight);
					}else{
						var Lw = parseFloat(self.imagesSize.width);
						var Lh = parseFloat(self.imagesSize.height);
					}
					if(Bw < Lw || Bh < Lh){
						var rateW =  Bw/Lw;
						var rateH = Bh/Lh;
						if(rateW>rateH){
							num = rateH;
						}else{
							num = rateW;
						}
						proportion = num;
					}else{
						proportion = 1;
					}
					self.ImgParam.proportion = proportion;
					var fproportion = Math.round(proportion*100);
					self.ImgParam.slider = (slider/2)*(fproportion/100);
					self.imagesSize.show = true;
					self.imageproportion();
				});
				
			},
		}
	};
</script>