快捷導(dǎo)航

vue項(xiàng)目實(shí)現(xiàn)局部全屏完整代碼

更新時(shí)間：2023年09月19日 11:50:54 作者：nxKJD

最近需要做一個(gè)全屏功能,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)局部全屏的相關(guān)資料,需要的朋友可以參考下

1、給想全屏的元素設(shè)定ref屬性

  <div ref="box" class="big-box"  @click="isScreenFull">
    首頁(yè)
  </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: "您的瀏覽器版本過(guò)低不支持全屏顯示！",
          type: "warning",
        });
        return false;
      }
//此處填入需要全屏的ref屬性值即可
      screenfull.toggle(this.$refs.box);
    },

4、完整代碼

<template >
  <div ref="box" class="big-box"  @click="isScreenFull">
    首頁(yè)
  </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: "您的瀏覽器版本過(guò)低不支持全屏顯示！",
          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àng)目實(shí)現(xiàn)局部全屏的文章就介紹到這了,更多相關(guān)vue局部全屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)實(shí)例
很多時(shí)候我們需要從本地讀取JSON文件里面的內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2023-06-06
使用vue-virtual-scroller遇到的問(wèn)題及解決
這篇文章主要介紹了使用vue-virtual-scroller遇到的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue列表循環(huán)從指定下標(biāo)開始的多種解決方案
這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開始的多種方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-04-04
Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
elementUI select組件使用及注意事項(xiàng)詳解
這篇文章主要介紹了elementUI select組件使用及注意事項(xiàng)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲(chǔ)到Minio的操作方法
這篇文章主要介紹了Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲(chǔ)到Minio的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-06-06
Vue3?setup?的作用實(shí)例詳解
setup?用來(lái)寫組合式?API，從生命周期的角度，相當(dāng)于取代了?beforeCreate()，這篇文章主要介紹了Vue3?setup?的作用,需要的朋友可以參考下
2022-12-12
vue3.0實(shí)現(xiàn)插件封裝
這篇文章主要介紹了vue3.0實(shí)現(xiàn)插件封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
關(guān)于Vue 消除Token過(guò)期時(shí)刷新頁(yè)面的重復(fù)提示問(wèn)題
很多朋友在token過(guò)期時(shí)刷新頁(yè)面，頁(yè)面長(zhǎng)時(shí)間未操作，再刷新頁(yè)面時(shí)，第一次彈出“token失效,請(qǐng)重新登錄!”提示，針對(duì)這個(gè)問(wèn)題該怎么處理呢，下面小編給大家?guī)?lái)原因分析及解決方法，一起看看吧
2021-07-07
vue與react詳細(xì)
react在中后臺(tái)項(xiàng)目中由于在處理復(fù)雜的業(yè)務(wù)邏輯或組件的復(fù)用問(wèn)題比vue優(yōu)雅而被人認(rèn)可，但也更需要團(tuán)隊(duì)技術(shù)整體比較給力，領(lǐng)頭大佬的設(shè)計(jì)與把關(guān)能力要更優(yōu)秀，因此開發(fā)成本更大，下面文章就來(lái)詳細(xì)介紹,需要的朋友可以參考下
2021-09-09