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)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)選項卡案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了使用vue實現(xiàn)計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在了解vue的常用的實例方法之前，我們應該先要了解其常用的實例屬性，你能了解到的vue實例屬性有哪些呢？小編在這里就列舉了幾個常用的vue實例的屬性。大家可以一起參考學習一下2022-08-08
這篇文章主要給大家介紹了關(guān)于Vue的組件中data選項為什么必須是函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
ref在我們開發(fā)項目當中很重要的,在?Vue?中使用?ref?可以提高代碼的可讀性和維護性,因為它直接標識出了組件中需要操作的具體元素或組件實例,本文我將給大家?guī)淼氖莢ue3中用ref獲取dom的操作,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
Vue2與Vue3如何利用install自定義全局確認框組件編寫
這篇文章主要介紹了Vue2與Vue3如何利用install自定義全局確認框組件編寫方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue里如何主動銷毀keep-alive緩存的組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
vue組件props不同數(shù)據(jù)類型傳參的默認值問題
這篇文章主要介紹了vue組件props不同數(shù)據(jù)類型傳參的默認值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
公共Hooks封裝useTableData表格數(shù)據(jù)實例
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07