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) {
// 如果不支持進入全屏，發(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) {
// 如果不支持進入全屏，發(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中,渲染函數(shù)是一種用于動態(tài)生成組件的函數(shù),可以將組件的模板代碼編寫為JavaScript代碼,并在運行時進行渲染,下面我們就來看看它的具體用法吧2023-08-08
從安裝到使用詳解vue項目中i18n(vue-i18n)實現(xiàn)國際化的完整指南
國際化Internationalization,通?？s寫為i18n,是指設(shè)計和開發(fā)軟件應(yīng)用程序,使其能夠輕松地適應(yīng)不同的語言,下面小編就將從安裝到使用為大家進行詳細(xì)介紹2025-10-10
這篇文章主要介紹了Vue手寫dialog組件模態(tài)框過程，dialog組件為模態(tài)框，因此應(yīng)該是固定定位到頁面上面的，并且需要留一定的插槽來讓使用者自定義顯示內(nèi)容2023-02-02
vue3+vite+vant4手機端項目實戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant4手機端項目實戰(zhàn)的相關(guān)資料,Vue3是一種前端開發(fā)框架,它的目標(biāo)是提供更好的性能和開發(fā)體驗,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)用戶登錄及token驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue引入并使用Element組件庫的兩種方式小結(jié)
本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實例
這篇文章主要給大家介紹了關(guān)于elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實例的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
本文主要介紹了Vue.js實現(xiàn)全屏背景圖片滑動切換特效,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
這篇文章主要介紹了vue+element加入簽名效果（移動端），本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06