vue 实现全屏预览功能；以及js 实现预览功能

本文链接：https://blog.csdn.net/weixin_43865196/article/details/124419958

一. 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();  
        }