需求
點擊某按鈕實現(xiàn)頁面全屏 按下 Esc 鍵退出全屏 IE9以下無需兼容
安裝
npm install --sava screenfull
使用
<script>
// 導入全屏第三方模塊
import screenfull from 'screenfull'
export default {
data () {
return {
// 全屏/不全屏
isFullscreen: false
}
}，
methods: {
// 全屏模式 將方法綁定(點擊事件)到頁面的元素上即可
screenfull() {
if (!screenfull.enabled) {
this.$message({
message: '您的瀏覽器無法進入全屏模式',
type: 'warning'
})
return false
}
screenfull.toggle()
this.isFullscreen = true
},
// Esc 全屏監(jiān)測
checkFull() {
let isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
if (isFull === undefined) {
isFull = false
}
return isFull
}
},
mounted() {
window.onresize = () => {
// 全屏下監(jiān)控是否按鍵了ESC
if (!this.checkFull()) {
// 退出全屏
this.isFullscreen = false
}
}
}
}
</script>
