vue點擊按鈕實現(xiàn)讓頁面的某一個元素全屏展示
點擊按鈕讓頁面的某一個元素全屏展示
先上效果圖
項目情況：vue+screenfull插件
其實文檔上寫的很清楚：screenfull文檔
點擊頁面的全屏圖標(biāo)，使包裹地圖的div實現(xiàn)全屏。
頁面結(jié)構(gòu)
在頁面加載時添加監(jiān)聽
mounted () {
const element = document.getElementById('map_container');
document.getElementById('full_screen').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element);
}
});
},
vue全屏和退出全屏調(diào)用事件
1、先說一下需求
要求在第一個頁面點擊全屏按鈕進(jìn)入全屏或者第二個新的頁面全屏，并且按F11或esc退出全屏回退到第一個小屏頁面
失敗的嘗試：
顯示嘗試?yán)迷鷣韺崿F(xiàn)，但是發(fā)現(xiàn)退出全屏?xí)r，我們想在F11上面添加一些事件（比如退回上一頁面路由；添加彈窗等操作）無法實現(xiàn)，原因是瀏覽器不允許我們自定義F11退出全屏按鍵，因為如果可以自定義的話，那么有惡意的方式讓用戶點擊全屏進(jìn)去，然后我們?nèi)ソ眠@個全屏按鈕那么豈不是用戶沒有辦法退出了
2、正確如下
利用screenfull插件直接去監(jiān)聽頁面的大小改變，不用去監(jiān)聽按鍵事件
首先安裝screenfull
npm install screenfull@4.2.0 --save
在需要全屏的組件中引入
import screenfull from "screenfull";
頁面全屏
template中寫好一個全屏按鈕和點擊事件
<div class="one" @click="btn"> ? ? ? ? ? ? <i ? ? ? ? ? ? ? class="iconfont icon-quanping1" ? ? ? ? ? ? ? style="margin-top: 1px;" ? ? ? ? ? ? ></i> ? ? ? ? ? </div>
在methods中添加btn事件
btn() {
? ? ? document.documentElement.webkitRequestFullScreen(); //進(jìn)入全屏
? ? ? screenfull.toggle();//全屏顯示
? ? },部分元素全屏
寫好點擊圖標(biāo)，然后在需要顯示的元素上添加id
?? ?<div ? ? ? ? :class="isCollapse ? 'ifa-collapsed' : 'ifa'" ? ? ? ? ref="full_el" ? ? ? ? id="screen" ? ? ? > ? ? ? ? <router-view /> ? ? ? </div>
在methods中添加btn事件
? btn() {
? ? ? ?let element = document.getElementById("screen"); //指定全屏區(qū)域元素
? ? ? ? screenfull.toggle(this.element); //全屏顯示
? ? },退出全屏調(diào)用事件
如果是跳轉(zhuǎn)到第二個頁面全屏的狀態(tài)
當(dāng)esc或f11退出全屏后，我們雖然不能監(jiān)聽退出全屏的按鍵，但是可以根據(jù)監(jiān)聽頁面大小變化調(diào)用事件
data() {
? ? return {
? ? ? isFull:'',//全屏檢查
? ? ? }
? ?}
watch: {
? ? isFull(newvalue, oldvalue) {
? ? ? console.log("我監(jiān)聽到了");
? ? ? ?event.keyCode=0;
? ? ? ?
? ? ? this.$router.go(-1);
? ? },
? },
methods: {
? ? ? checkFull() {
? ? ? let isFull = window.fullScreen || document.webkitIsFullScreen;
? ? ? this.isFull = isFull;
? ? ? console.log("isfull"+this.isFull);
? ? },
?},
created() {
? ? ?window.onresize = () => {
? ? ? //調(diào)用判斷全屏的方法，用來監(jiān)聽
? ? ? this.checkFull();
? ? };
? },注意點：
如果頁面當(dāng)中echars圖或者是有組件有使用過window.onresize方法進(jìn)行適應(yīng)時，那么此時的created監(jiān)聽退出全屏?xí)В?/p>
解決方式：
- 1.刪點組件中的window.onresize函數(shù)
- 2.利用監(jiān)聽的方式同時監(jiān)聽兩個onresize方法如下
?? ??? ?window.addEventListener("resize", () => {
? ? ? ? ? this.myChart.resize(),//可以自定義添加多個方法
? ? ? ? ? ?this.checkFull();
? ? ? ? });就可以解決沖突的問題了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli中設(shè)置publicPath的幾種方式對比
這篇文章主要介紹了vue-cli中設(shè)置publicPath的幾種方式對比，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本文主要介紹了Vue+Cesium快速搭建的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
當(dāng)協(xié)議,域名,端口其中某一個不一致的時候,就會產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于Vue項目中該如何解決跨域問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
本文主要介紹在Vue中使用debouce防抖函數(shù)，設(shè)置一個門檻值，表示兩次?Ajax?通信的最小間隔時間。如果在間隔時間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)?Ajax?通信，并且重新開始計時。如果過了指定時間，沒有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去，這便是debouce防抖函數(shù)2021-12-12
JavaScript的MVVM庫Vue.js入門學(xué)習(xí)筆記
這篇文章主要介紹了JavaScript的MVVM庫Vue.js入門學(xué)習(xí)筆記,Vue.js是一個新興的js庫,主要用于實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件,需要的朋友可以參考下2016-05-05
vue基于mint-ui的城市選擇3級聯(lián)動的示例
本篇文章主要介紹了vue基于mint-ui的城市選擇3級聯(lián)動的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
有時候不希望已經(jīng)請求過的數(shù)據(jù),再次請求重復(fù)執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關(guān)于如何巧用Vue緩存函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue如何使用混合Mixins和插件開發(fā)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
應(yīng)用provide與inject刷新Vue頁面方法
這篇文章主要介紹了應(yīng)用provide與inject刷新Vue頁面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進(jìn)步，祝大家早日升職加薪2021-09-09
超詳細(xì)教程實現(xiàn)Vue底部導(dǎo)航欄TabBar
本文詳細(xì)講解了Vue實現(xiàn)TabBar底部導(dǎo)航欄的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11