vue實現(xiàn)瀏覽器全屏展示功能
更新時間:2019年11月27日 09:44:46 作者:稚于最初灬
這篇文章主要介紹了vue實現(xiàn)瀏覽器全屏展示功能,項目中使用的是sreenfull插件,執(zhí)行命令安裝,具體實現(xiàn)代碼跟隨小編一起看看吧
1、項目中使用的是sreenfull插件,執(zhí)行命令安裝
npm install --save screenfull
2、安裝好后,引入項目,用一個按鈕進行控制即可,按鈕方法如下:
toggleFullscreen() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle()
}
試了一下可以全屏,我用的chrome,IE9以下不要考慮
3、第一步完成之后就是怎么監(jiān)聽到全屏的變化,因為如果是通過Esc鍵退出全屏,此時是沒辦法監(jiān)聽到的。經(jīng)過一番查找,解決辦法如下:
<script>
import screenfull from 'screenfull'
export default {
data () {
return {
isFullscreen: false
}
},
methods: {
/**
* 全屏事件
*/
screenfull() {
if (!screenfull.enabled) {
this.$message({
message: 'Your browser does not work',
type: 'warning'
})
return false
}
screenfull.toggle()
this.isFullscreen = true
},
/**
* 是否全屏并按鍵ESC鍵的方法
*/
checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
// to fix : false || undefined == undefined
if (isFull === undefined) {
isFull = false
}
return isFull
}
},
mounted() {
window.onresize = () => {
// 全屏下監(jiān)控是否按鍵了ESC
if (!this.checkFull()) {
// 全屏下按鍵esc后要執(zhí)行的動作
this.isFullscreen = false
}
}
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)瀏覽器全屏展示功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

