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