vue點(diǎn)擊按鈕實(shí)現(xiàn)讓頁(yè)面的某一個(gè)元素全屏展示
點(diǎn)擊按鈕讓頁(yè)面的某一個(gè)元素全屏展示
先上效果圖
項(xiàng)目情況：vue+screenfull插件
其實(shí)文檔上寫的很清楚：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中寫好一個(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();//全屏顯示
? ? },部分元素全屏
寫好點(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)文章
Element-UI 解決el-table中圖片懸浮被遮擋問(wèn)題小結(jié)
在開(kāi)發(fā)中,發(fā)現(xiàn)element-ui在el-table中添加圖片懸浮顯示時(shí),會(huì)被單元格遮擋的問(wèn)題,對(duì)于此問(wèn)題解決其實(shí)也并不難,將懸浮圖片放在body節(jié)點(diǎn)下,通過(guò)定位顯示即可,感興趣的朋友跟隨小編一起看看吧2024-06-06
vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請(qǐng)求框架，本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了vue vant Area組件使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了如何在JS文件中獲取Vue組件，幫助大家更好的理解和學(xué)習(xí)前端知識(shí)，感興趣的朋友可以了解下2020-09-09
vue3循環(huán)設(shè)置ref并獲取的解決方案
我們?cè)谄綍r(shí)做業(yè)務(wù)的時(shí)候,父子組件通信會(huì)經(jīng)常用到ref,這篇文章主要給大家介紹了關(guān)于vue3循環(huán)設(shè)置ref并獲取的解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue實(shí)現(xiàn)在v-html的html字符串中綁定事件
今天小編就為大家分享一篇vue實(shí)現(xiàn)在v-html的html字符串中綁定事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
elementUI中el-upload文件上傳的實(shí)現(xiàn)方法
ElementUI的組件支持多種事件鉤子,如http-request、before-upload和on-change,以實(shí)現(xiàn)自定義文件上傳處理,這篇文章主要介紹了elementUI中el-upload文件上傳的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-11-11
詳解Vue如何進(jìn)行分布式事務(wù)管理以及解決方案
在分布式系統(tǒng)中，事務(wù)管理是一個(gè)非常重要的問(wèn)題，所以本文將介紹一下Vue中如何進(jìn)行分布式事務(wù)管理以及分布式事務(wù)解決方案，希望對(duì)大家有所幫助2023-06-06
Vue3獲取DOM節(jié)點(diǎn)的3種方式實(shí)例
Vue本來(lái)無(wú)需操作DOM來(lái)更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點(diǎn)的3種方式,需要的朋友可以參考下2023-02-02
Vue + CSS實(shí)現(xiàn)漸變柵格進(jìn)度條效果
基于Vue和CSS實(shí)現(xiàn)漸變柵格進(jìn)度條,通過(guò)劃分柵格單元、顏色漸變、標(biāo)簽與刻度的絕對(duì)定位來(lái)實(shí)現(xiàn)高度靈活和交互性,進(jìn)度條劃分為多個(gè)柵格,每個(gè)單元格顏色漸變并且連續(xù),可以根據(jù)不同的場(chǎng)景配置個(gè)性化屬性,具有極高的靈活度和交互性,感興趣的朋友一起看看吧2025-03-03