vue實(shí)現(xiàn)瀏覽器全屏展示功能
1、項(xiàng)目中使用的是sreenfull插件,執(zhí)行命令安裝
npm install --save screenfull
2、安裝好后,引入項(xiàng)目,用一個(gè)按鈕進(jìn)行控制即可,按鈕方法如下:
toggleFullscreen() { if (!screenfull.enabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle() }
試了一下可以全屏,我用的chrome,IE9以下不要考慮
3、第一步完成之后就是怎么監(jiān)聽到全屏的變化,因?yàn)槿绻峭ㄟ^Esc鍵退出全屏,此時(shí)是沒辦法監(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í)行的動(dòng)作 this.isFullscreen = false } } } } </script>
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)瀏覽器全屏展示功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
使用vue實(shí)現(xiàn)計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了使用vue實(shí)現(xiàn)計(jì)時(shí)器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08詳解Vue的組件中data選項(xiàng)為什么必須是函數(shù)
這篇文章主要給大家介紹了關(guān)于Vue的組件中data選項(xiàng)為什么必須是函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫
這篇文章主要介紹了Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue里如何主動(dòng)銷毀keep-alive緩存的組件
這篇文章主要介紹了vue里如何主動(dòng)銷毀keep-alive緩存的組件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03vue組件props不同數(shù)據(jù)類型傳參的默認(rèn)值問題
這篇文章主要介紹了vue組件props不同數(shù)據(jù)類型傳參的默認(rèn)值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)拿到返回值后的處理源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07