vue 实现全屏预览功能; 以及js 实现预览功能
通过点击图片按钮,动态切换全屏预览引入screenfull 模块,建议使用5.2.0版本,更高版本有可能会出现编译错误.npm install screenfull@5.2.0实现<template><img src="../img/fullScreen" @click="fullScreenClick()"></template><script>i
·
一. vue 实现全屏预览
通过点击图片按钮,动态切换全屏预览
- 引入screenfull 模块,建议使用5.2.0版本,更高版本有可能会出现编译错误.
npm install screenfull@5.2.0
- 实现
<template>
<img src="../img/fullScreen" @click="fullScreenClick()">
</template>
<script>
import screenfull from 'screenfull'
export default {
data() {
return {
isFullscreen: false // 是否全屏
}
},
mounted(){
this.initScreenFull()
},
beforeDestroy(){
this.initScreenDistroy()
},
methods:{
initScreenFull(){
if(screenfull.isEnabled) {
screenfull.on('change',this.change)
}
},
change(){
this.isFullscreen= screenfull.isFullscreen
},
initScreenDistroy(){
if(screenfull.isEnabled) {
screenfull.off('change',this.change)
}
},
/**
* 全屏预览事件处理
*/
fullScreenClick(){
if(!screenfull.isEnabled) {
this.$message.info('您的浏览器版本过低,不支持全屏浏览')
return false
} else {
screenfull.toggle()
}
}
}
}
</script>
二. js 实现全屏预览
function fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
if(typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if(wscript) {
wscript.SendKeys("{F11}");
}
}
}
function exitFullScreen(el) {
var el= document,
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
<button id='btn'>全屏按钮</button>
<div id="content" style="background:yellow;width:500px;height:500px;">sljfsdlfj
<div id="quite" class="btn">退出全屏</div>
</div>
var btn = document.getElementById('btn');
var content = document.getElementById('content');
btn.onclick = function(){
fullScreen(content);
}
var quite = document.getElementById('quite');
quite.onclick = function(){
exitFullScreen();
}
更多推荐
已为社区贡献4条内容
所有评论(0)