vue element-ui导航实现全屏/取消全屏功能
作者：IT博客技术分享
这篇文章主要介绍了vue element-ui导航实现全屏/取消全屏功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element-ui导航实现全屏/取消全屏功能
先上效果图
html部分代码：
<!-- 全屏 -->
<span class="user" @click="toggleFullScreen">
<el-tooltip class="item" effect="dark" :content="isFullScreen ? '退出全屏':'全屏'" placement="bottom">
<i :class="isFullScreen ? 'el-icon-aim':'el-icon-full-screen'"
style="width: 1.6rem;height: 1.6rem;vertical-align:middle;margin-right: .6rem;margin-bottom: .5rem;font-size:2rem"></i>
</el-tooltip>
</span>data()定义部分：
return{
isFullScreen: false, //全屏开关
}js方法：
//全屏设置
toggleFullScreen () {
if (this.canFullScreen) {
if (this.isFullScreen) {
// 关闭全屏
this.exitFullScreen()
this.isFullScreen = false
} else {
// 打开全屏
this.requestFullScreen(document.body)
this.isFullScreen = true
}
} else {
this.$message.warning({
content: '当前浏览器暂不支持全屏模式，请切换浏览器后重新尝试！',
duration: 3
})
}
},
requestFullScreen (element) {
// 判断各种浏览器，找到正确的方法
const requestMethod = element.requestFullScreen || // W3C
element.webkitRequestFullScreen || // Chrome, safari
element.mozRequestFullScreen || // FireFox
element.msRequestFullscreen // IE11
if (requestMethod) {
requestMethod.call(element)
}
},
exitFullScreen () {
var exitMethod = document.exitFullscreen || // W3C
document.mozCancelFullScreen || // FireFox
document.webkitExitFullscreen || // Chrome等
document.msExitFullscreen // IE11
if (exitMethod) {
exitMethod.call(document)
}
},
addFullScreenListener () {
const self = this
document.onkeydown = function (e) {
if (e && e.keyCode === 122) { // 捕捉F11键盘动作
e.preventDefault() // 阻止F11默认动作
self.toggleFullScreen()
}
}
// 监听不同浏览器的全屏事件，并件执行相应的代码
switch (self.browserKernel) {
case 'webkit':
document.onwebkitfullscreenchange = function () {
if (document.webkitIsFullScreen) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
case 'gecko':
document.onmozfullscreenchange = function () {
if (document.mozFullScreen) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
case 'trident':
document.onmsfullscreenchange = function () {
if (document.msFullscreenElement) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
case 'others':
document.onfullscreenchange = function () {
if (document.fullscreen) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
default:
break
}
},优化方案
在页面初始化时判断浏览器是否支持全屏操作
// 检查浏览器是否支持全屏
this.canFullScreen = document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
if (document.webkitFullscreenEnabled) {
this.browserKernel = 'webkit'
} else if (document.mozFullScreenEnabled) {
this.browserKernel = 'gecko'
} else if (document.msFullscreenEnabled) {
this.browserKernel = 'trident'
} else if (document.fullscreenEnabled) {
this.browserKernel = 'others'
}
if (this.canFullScreen) {
this.addFullScreenListener()
}最后在销毁页面时移除监听：
destroyed(){
document.onkeydown = null
switch (this.browserKernel) {
case 'webkit':
document.onwebkitfullscreenchange = null
break
case 'gecko':
document.onmozfullscreenchange = null
break
case 'trident':
document.onmsfullscreenchange = null
break
case 'others':
document.onfullscreenchange = null
break
default:
break
}
}如果想换图标可以自动定义 ：
也可以用svg 图标引进来：
<i :class="isFullScreen ? 'el-icon-aim':'el-icon-full-screen'" ><i/>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。