上海网站建设接单,南宁品牌网站建设,光谷网站制作,耒阳市做网站的最近项目开发中遇到一个视频窗口全屏切换功能#xff0c;为此在这里做个记录。 具体的实现思路#xff1a;
templatediv classcontent-boxdiv classcontainerdiv idscreen classscreen为此在这里做个记录。 具体的实现思路
templatediv classcontent-boxdiv classcontainerdiv idscreen classscreenel-button clickscreen(){{ fullscreen ? 还原 : 最大化 }}/el-button/div/div/div
/templatescript
export default {data() {return {fullscreen: false,};},mounted() {window.addEventListener(resize, () {if (!this.isFullScreen()) {// 非全屏状态this.fullscreen false;}});},methods: {//判断是否全屏isFullScreen() {return !!(document.webkitIsFullScreen || this.fullele());},fullele() {return (document.fullscreenElement ||document.webkitFullscreenElement ||document.msFullscreenElement ||document.mozFullScreenElement ||null);},screen() {let element document.getElementById(screen);if (this.fullscreen) {// 关闭全屏if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}} else {// 全屏if (element.requestFullscreen) {element.requestFullscreen();} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.msRequestFullscreen) {// IE11element.msRequestFullscreen();}}this.fullscreen !this.fullscreen;},},
};
/scriptstyle langscss scoped
.screen {width: 500px;height: 500px;background-color: #fff;border: 1px solid red;
}
/style这里需要监听ESC键为此做了特殊处理这里是Demo,跟使用效果图基本差不多
