我要评论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/>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论