vue項目實現(xiàn)局部全屏完整代碼
更新時間：2023年09月19日 11:50:54 作者：nxKJD
最近需要做一個全屏功能,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)局部全屏的相關(guān)資料,需要的朋友可以參考下
1、給想全屏的元素設(shè)定ref屬性
<div ref="box" class="big-box" @click="isScreenFull">
首頁
</div>2、引入screenfull插件（需要提前安裝npm install --save-dev screenfull@5.1.0）
//引入全屏插件 import screenfull from "screenfull";
3、全屏方法
//全屏方法
isScreenFull() {
console.log(111);
if (!screenfull.isEnabled) {
// 如果不支持進(jìn)入全屏，發(fā)出不支持提示
this.$message({
message: "您的瀏覽器版本過低不支持全屏顯示！",
type: "warning",
});
return false;
}
//此處填入需要全屏的ref屬性值即可
screenfull.toggle(this.$refs.box);
},4、完整代碼
<template >
<div ref="box" class="big-box" @click="isScreenFull">
首頁
</div>
</template>
<script>
//引入全屏插件
import screenfull from "screenfull";
export default {
data() {
return {};
},
created() {
this.$nextTick(() => {
this.isScreenFull()
});
},
methods: {
//全屏方法11
isScreenFull() {
console.log(111);
if (!screenfull.isEnabled) {
// 如果不支持進(jìn)入全屏，發(fā)出不支持提示
this.$message({
message: "您的瀏覽器版本過低不支持全屏顯示！",
type: "warning",
});
return false;
}
screenfull.toggle(this.$refs.box);
},
},
};
</script>
<style lang="scss" scoped>
.big-box{
background: pink;
}
</style>5、效果圖
總結(jié)
到此這篇關(guān)于vue項目實現(xiàn)局部全屏的文章就介紹到這了,更多相關(guān)vue局部全屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項目如何讀取本地json文件數(shù)據(jù)實例
很多時候我們需要從本地讀取JSON文件里面的內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue項目如何讀取本地json文件數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2023-06-06
使用vue-virtual-scroller遇到的問題及解決
這篇文章主要介紹了使用vue-virtual-scroller遇到的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue列表循環(huán)從指定下標(biāo)開始的多種解決方案
這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開始的多種方案,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)價格計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了elementUI select組件使用及注意事項詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Vue?+?SpringBoot?實現(xiàn)文件的斷點上傳、秒傳存儲到Minio的操作方法
這篇文章主要介紹了Vue?+?SpringBoot?實現(xiàn)文件的斷點上傳、秒傳存儲到Minio的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-06-06
setup?用來寫組合式?API，從生命周期的角度，相當(dāng)于取代了?beforeCreate()，這篇文章主要介紹了Vue3?setup?的作用,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3.0實現(xiàn)插件封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
關(guān)于Vue 消除Token過期時刷新頁面的重復(fù)提示問題
很多朋友在token過期時刷新頁面，頁面長時間未操作，再刷新頁面時，第一次彈出“token失效,請重新登錄!”提示，針對這個問題該怎么處理呢，下面小編給大家?guī)碓蚍治黾敖鉀Q方法，一起看看吧2021-07-07
react在中后臺項目中由于在處理復(fù)雜的業(yè)務(wù)邏輯或組件的復(fù)用問題比vue優(yōu)雅而被人認(rèn)可，但也更需要團(tuán)隊技術(shù)整體比較給力，領(lǐng)頭大佬的設(shè)計與把關(guān)能力要更優(yōu)秀，因此開發(fā)成本更大，下面文章就來詳細(xì)介紹,需要的朋友可以參考下2021-09-09