321 lines
9.5 KiB
HTML
321 lines
9.5 KiB
HTML
<div class="picture-box el-container is-vertical">
|
|
<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>
|
|
<div class="el-carousel" style="position: relative;flex: 1;overflow: hidden;">
|
|
<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 v-if="previews.data.length">
|
|
<el-button
|
|
v-if="previews.active > 0"
|
|
style="left: 0;"
|
|
class="el-carousel__arrow"
|
|
@click="previewClick(previews.active - 1 )"
|
|
icon="ArrowLeftBold"></el-button>
|
|
<el-button
|
|
v-if="previews.active + 1 < previews.data.length"
|
|
class="el-carousel__arrow"
|
|
style="right: 0;"
|
|
@click="previewClick(previews.active + 1)"
|
|
icon="ArrowRightBold"></el-button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<div class="album-box" v-if="previews.data.length">
|
|
<el-button
|
|
v-if="previews.size"
|
|
class="slider-btn slider-btn-prev"
|
|
@click="previewSwitch('left')"
|
|
text
|
|
icon="ArrowLeftBold"></el-button>
|
|
<div class="album-imgs" ref="previewBox">
|
|
<ul
|
|
class="album-imglist"
|
|
ref="previewChild"
|
|
:style="{transform: 'translate('+previews.transform+'px, 0px)'}">
|
|
<li
|
|
v-for="(item,index) in previews.data"
|
|
:key="index"
|
|
:ref="'previewImage'+index"
|
|
@click="previewClick(index)">
|
|
<div class="album-img" :class="{'active':index==previews.active}" >
|
|
<el-image :src="item.spath?item.spath:'dzz/images/extimg/'+imagesData.filetype+'.png'" fit="contain" ><template #error><div class="el-image__placeholder"></div></template></el-image>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<el-button
|
|
v-if="previews.size"
|
|
class="slider-btn slider-btn-next"
|
|
@click="previewSwitch('right')"
|
|
text
|
|
icon="ArrowRightBold"></el-button>
|
|
</div>
|
|
|
|
</div>
|
|
<script type="text/javascript">
|
|
var ImageMixin = {
|
|
watch:{
|
|
'previews.active':function(val){
|
|
this.previewPosition();
|
|
},
|
|
},
|
|
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();
|
|
});
|
|
|
|
},
|
|
previewClick(index){
|
|
let self = this;
|
|
if(this.previews.active == index || this.previews.data.length <= index || index <= -1)return false;
|
|
this.previews.active = index;
|
|
this.imagesData.originalimg = this.previews.data[index].lpath;
|
|
|
|
},
|
|
previewPosition(){
|
|
let self = this;
|
|
if(!self.previews.size)return false;
|
|
let index = this.previews.active;
|
|
let WBox = self.$refs.previewBox.offsetWidth;
|
|
let fWBox = self.$refs.previewBox.offsetWidth / 2;
|
|
let WChild = self.$refs.previewChild.offsetWidth;
|
|
let offsetLeft = self.$refs['previewImage'+index][0].offsetLeft - 34;
|
|
if(offsetLeft < fWBox){
|
|
self.previews.transform = 0;
|
|
}else if(offsetLeft > (WChild - WBox)){
|
|
self.previews.transform = -(WChild - WBox);
|
|
}else{
|
|
self.previews.transform = -(offsetLeft - fWBox);
|
|
}
|
|
},
|
|
previewSwitch(type){
|
|
let self = this;
|
|
let WBox = self.$refs.previewBox.offsetWidth;
|
|
let WChild = self.$refs.previewChild.offsetWidth;
|
|
if(type == 'left'){
|
|
if(self.previews.transform == 0){
|
|
return;
|
|
}else{
|
|
let fw = this.previews.transform + WBox;
|
|
if(fw > 0){
|
|
self.previews.transform = 0;
|
|
}else{
|
|
this.previews.transform = fw;
|
|
}
|
|
}
|
|
}else{
|
|
let fw = self.previews.transform - WBox;
|
|
if(fw < -(WChild - WBox)){
|
|
self.previews.transform = -(WChild - WBox);
|
|
}else{
|
|
self.previews.transform = fw;
|
|
}
|
|
}
|
|
|
|
},
|
|
previewSize(){
|
|
let self = this;
|
|
if(!self.$refs.previewBox || !self.$refs.previewChild)return false;
|
|
let WBox = self.$refs.previewBox.offsetWidth;
|
|
let WChild = self.$refs.previewChild.offsetWidth;
|
|
if(WChild > WBox){
|
|
self.previews.size = true;
|
|
}else{
|
|
self.previews.size = false;
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script> |