admingit/MicroCommunityWeb
1
0
Fork 0
mirror of https://gitee.com/java110/MicroCommunityWeb.git synced 2026-02-24 05:46:03 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化 图片展示

Browse Source
This commit is contained in:
java110 2020-06-21 16:20:28 +08:00
parent 90fa9e4f85
commit d60841df0c
3 changed files with 51 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.js
View File

@ -33,8 +33,8 @@ let opts = {
//app.use('/callComponent',proxy('https://app.demo.winqi.cn/',opts));
//app.use('/callComponent',proxy('http://api.demo.winqi.cn:8012/',opts));
app.use('/callComponent',proxy('http://api.demo.winqi.cn:8012',opts));
//app.use('/callComponent',proxy('http://127.0.0.1:8012',opts));
//app.use('/callComponent',proxy('http://api.demo.winqi.cn:8012',opts));
app.use('/callComponent',proxy('http://192.168.1.22:8012',opts));
//app.listen(3000);

10
public/components/common/viewImage/viewImage.html
View File

@ -1,4 +1,8 @@
<div v-if="viewImageInfo.showImage" style="position:fixed;z-index:3000;left:50%;top:50%;transform:translate(-50%,-50%);">
<img v-bind:src="viewImageInfo.url" style="width:1000px;height:500px;" />
<span v-on:click="_closeImage()" class="fa fa-remove " style="position: absolute;right: 20px;top: 20px;font-size: 20px;color:red"></span>
<div id="viewImage" v-show="viewImageInfo.showImage" >
<div style="position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background-color: #fff;">
<img v-bind:src="viewImageInfo.url" style="width:1000px;height:500px;" />
<span v-on:click="_closeImage()" class="fa fa-remove "
style="position: absolute;right: 20px;top: 20px;font-size: 20px;color:red"></span>
</div>
<!--style="position:fixed;z-index:3000;left:50%;top:50%;transform:translate(-50%,-50%);background-color: #fff;"-->
</div>

46
public/components/common/viewImage/viewImage.js
View File

@ -4,7 +4,7 @@
data: {
viewImageInfo: {
url: '',
showImage:false
showImage: false
}
},
_initMethod: function () {
@ -13,14 +13,52 @@
vc.on('viewImage', 'showImage', function (_param) {
$that.viewImageInfo.url = _param.url;
$that.viewImageInfo.showImage = true;
$that._launchIntoFullscreen();
});
},
methods: {
_closeImage:function(){
_closeImage: function () {
$that._exitFullscreen();
$that.viewImageInfo.showImage = false;
}
},
_launchIntoFullscreen: function () {
let full = document.getElementById("viewImage");
console.log(full);
if (full.requestFullscreen) {
full.requestFullscreen();
}
else if (full.mozRequestFullScreen) {
full.mozRequestFullScreen();
}
else if (full.webkitRequestFullscreen) {
full.webkitRequestFullscreen();
}
else if (full.msRequestFullscreen) {
full.msRequestFullscreen();
}
},
_exitFullscreen: function () {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
},
}
});
document.addEventListener("fullscreenchange", function (e) {
if (document.fullscreenElement) {
console.log('进入全屏')
} else {
$that.viewImageInfo.showImage = false;
}
})
})(window.vc);