vue 監(jiān)聽是否切屏和開啟小窗的實現(xiàn)過程

更新時間：2023年04月24日 09:34:07 作者：相與還

這篇文章主要介紹了vue 監(jiān)聽是否切屏和開啟小窗的過程，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

在做自己的項目的時候有用到判斷設備是否有切屏，一般用的多的地方就是考試系統(tǒng)，切屏我們都知道，一般可以很容易的進行監(jiān)控，只不過當開啟了小窗的時候，之前一直沒有解決辦法，而現(xiàn)在則通過監(jiān)控切屏和小窗來教大家如何進行設置監(jiān)聽這兩種方式。

切屏監(jiān)控

方法一

Vue框架提供了一個$hidden屬性，可以用來判斷當前頁面是否被隱藏（如在后臺標簽頁）。以下是具體代碼：

export default {
  data () {
    return {
      isHidden: false // 頁面是否被隱藏（初始值為false）
    };
  },
  created () {
    // 監(jiān)聽document visibilityState變化事件（用于監(jiān)聽頁面是否被隱藏）
    document.addEventListener('visibilitychange', this.onVisibilityChange);
  },
  destroyed () {
    // 解除監(jiān)聽事件
    document.removeEventListener('visibilitychange', this.onVisibilityChange);
  },
  methods: {
    // 監(jiān)聽頁面是否被隱藏
    onVisibilityChange () {
      this.isHidden = document.hidden;
      if (this.isHidden) { // 當前頁被隱藏
        // 執(zhí)行相關操作
      } else { // 當前頁被打開
        // 執(zhí)行相關操作
      }
    }
  }
};

以上代碼在Vue組件中，利用$hidden屬性來判斷當前頁面是否被隱藏，并根據(jù)該取值來執(zhí)行相應操作。需要注意的是，在關閉組件前必須解除監(jiān)聽事件以避免內存泄漏。

方法二

可以利用Vue的activated和deactivated生命周期函數(shù)來實現(xiàn)判斷頁面是否因為切換而隱藏。

具體代碼如下：

export default {
  data() {
    return {
      isActive: false, // 標志頁面是否處于活動狀態(tài)
      isHidden: false, // 標志頁面是否處于隱藏狀態(tài)
    };
  },
  activated() {
    this.isActive = true;
    if (this.isHidden) {
      console.log('頁面由隱藏狀態(tài)切換到了活動狀態(tài)');
      // TODO：執(zhí)行需要在頁面由隱藏狀態(tài)切換到活動狀態(tài)時的邏輯
    }
    this.isHidden = false;
  },
  deactivated() {
    this.isActive = false;
    if (!this.isHidden) {
      console.log('頁面由活動狀態(tài)切換到了隱藏狀態(tài)');
      // TODO：執(zhí)行需要在頁面由活動狀態(tài)切換到隱藏狀態(tài)時的邏輯
    }
    this.isHidden = true;
  },
};

在代碼中，我們定義了兩個變量isActive和isHidden，分別代表頁面是否處于活動和隱藏狀態(tài)。

當activated生命周期函數(shù)被觸發(fā)時，我們將isActive設置為true，并且如果此時頁面之前處于隱藏狀態(tài)，則說明頁面是因為切換而隱藏的，此時我們可以執(zhí)行一些需要在頁面由隱藏狀態(tài)切換到活動狀態(tài)時的邏輯。

同理，當deactivated生命周期函數(shù)被觸發(fā)時，我們將isActive設置為false，并且如果此時頁面之前處于活動狀態(tài)，則說明頁面是因為切換而隱藏的，此時我們可以執(zhí)行一些需要在頁面由活動狀態(tài)切換到隱藏狀態(tài)時的邏輯。

同時，我們還需要根據(jù)activated和deactivated生命周期函數(shù)的調用順序來設置isHidden的值，以便準確標志頁面是否處于隱藏狀態(tài)。

小窗監(jiān)控

方法一

一開始我是沒有頭緒的，但是現(xiàn)在實際上是可以通過監(jiān)聽視窗和實際窗口比較大小，如果一直說明沒有變成小窗，否則說明開啟了小窗，那么就可以通過監(jiān)控它來添加我們需要的邏輯。

Vue 本身并沒有直接提供監(jiān)測設備是否開啟小窗口的 API，但可以通過 JavaScript 監(jiān)聽 window 對象的 resize 事件變化并通過 document.documentElement.clientHeight 和 document.documentElement.clientWidth 獲取當前視口寬高，進而推斷出設備是否開啟小窗口。

具體的實現(xiàn)方法如下：

在 Vue 組件中監(jiān)聽 resize 事件

<template>
  <div>{{ status }}</div>
</template>

<script>
export default {
  data() {
    return {
      status: ''
    };
  },
  created() {
    window.addEventListener('resize', this.check);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.check);
  },
  methods: {
    check() {
      if (document.documentElement.clientHeight < window.innerHeight) {
        this.status = '開啟小窗口';
      } else {
        this.status = '非小窗口';
      }
    }
  }
};
</script>

html
<template>
  <div>{{ status }}</div>
</template>

<script>
export default {
  data() {
    return {
      status: ''
    };
  },
  created() {
    window.addEventListener('resize', this.check);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.check);
  },
  methods: {
    check() {
      if (document.documentElement.clientHeight < window.innerHeight) {
        this.status = '開啟小窗口';
      } else {
        this.status = '非小窗口';
      }
    }
  }
};
</script>

在上面的代碼中，我們使用了 window 對象的 resize 事件，并在組件創(chuàng)建時添加該監(jiān)聽器。check() 方法會在觸發(fā) resize 前后檢查視口大小并輸出結果。

根據(jù)視口大小是否變化判斷設備狀態(tài)
在上述 check() 方法中，我們使用了一些計算方式來判斷設備狀態(tài)。主要思路是通過比較視口高度和 window 高度的大小，如果視口高度小于 window 高度，則認為設備處于小窗口模式，否則為非小窗口模式。

總之，這是一種可行的方式來檢測設備是否開啟小窗口，但需要注意的是，不同的設備及瀏覽器可能會有不同的反應速度，因此我們需要在具體情況中進行適當?shù)臏y試和調整。

方法二

除了以上方法，還可以通過matchMedia進行查詢
以下代碼是利用媒體查詢（Media Query）來判斷是否開啟小窗的方法，與Vue框架無關：

// 創(chuàng)建一個媒體查詢實例
const mediaQuery = window.matchMedia('(max-width: 768px)');

// 監(jiān)聽媒體查詢變化并執(zhí)行回調函數(shù)
mediaQuery.addListener(function (mq) {
  if (mq.matches) { // 當前窗口大小滿足小窗條件
    // 執(zhí)行相關操作
  } else { // 當前窗口大小不滿足小窗條件
    // 執(zhí)行相關操作
  }
});

以上代碼中，我們使用matchMedia方法來創(chuàng)建一個媒體查詢實例，并將小窗條件作為參數(shù)傳入。之后，通過addListener方法來監(jiān)聽該實例的變化，根據(jù)當前窗口大小是否滿足小窗條件來執(zhí)行相應操作。

需要注意的是，在使用該方法時，必須保證所設置的媒體查詢條件與CSS樣式表中所定義的一致，否則可能導致判斷出錯。

方法三

還可以通過操作DOM元素判斷是否開啟小窗，
以下代碼是通過檢測DOM元素寬度來判斷是否開啟小窗的方法：

export default {
  data () {
    return {
      isSmallScreen: false // 是否開啟小窗（初始值為false）
    };
  },
  mounted () {
    // 初次加載組件時判斷初始窗口大小
    this.checkWindowSize();
  },
  methods: {
    // 檢查當前窗口尺寸并根據(jù)該值更新isSmallScreen變量取值
    checkWindowSize () {
      const elementWidth = document.documentElement.clientWidth;
      if (elementWidth <= 768) {
        this.isSmallScreen = true;
      } else {
        this.isSmallScreen = false;
      }
    }
  }
};

以上代碼中，我們使用checkWindowSize函數(shù)來檢查當前窗口寬度，并根據(jù)該值來更新isSmallScreen變量的取值。需要注意的是，在初次渲染組件時也必須執(zhí)行一次checkWindowSize函數(shù)以確保頁面顯示正確。

該方法相對于利用媒體查詢或監(jiān)控屏幕大小變化的方法而言，更加精準，但不可避免地需要操作DOM，因此需要注意效率和性能問題。

結語

以上就是實現(xiàn)vue監(jiān)聽切屏和開啟小窗的過程

到此這篇關于vue 監(jiān)聽是否切屏和開啟小窗的實現(xiàn)過程的文章就介紹到這了,更多相關vue 監(jiān)聽切屏和開啟小窗內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue+Jwt+SpringBoot+Ldap完成登錄認證的示例代碼
本篇文章主要介紹了Vue+Jwt+SpringBoot+Ldap完成登錄認證的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
基于vue和react的spa進行按需加載的實現(xiàn)方法
這篇文章主要介紹了基于vue和react的spa進行按需加載,需要的朋友可以參考下
2018-09-09
深度解讀vue-resize的具體用法
這篇文章主要介紹了vue-resize深度解讀，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
解決vue動態(tài)為數(shù)據(jù)添加新屬性遇到的問題
今天小編就為大家分享一篇解決vue動態(tài)為數(shù)據(jù)添加新屬性遇到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue頁面切換項目實現(xiàn)轉場動畫的方法
這篇文章主要介紹了vue頁面切換項目實現(xiàn)轉場動畫的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
vue3遞歸組件封裝的全過程記錄
組件是可以在自己的模板中調用自身的,不過他們只能通過name選項來做這件事,下面這篇文章主要給大家介紹了關于vue3遞歸組件封裝的相關資料,需要的朋友可以參考下
2021-09-09
Vue中使用stylus報錯的解決
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報錯，也許這篇文章就是你的菜，一起來看看吧
2022-08-08
vue實現(xiàn)文字橫向無縫走馬燈組件效果的實例代碼
這篇文章主要介紹了vue 文字橫向無縫走馬燈組件的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04
vue項目使用jszip和file-saver批量打包壓縮圖片或附件方式
這篇文章主要介紹了vue項目使用jszip和file-saver批量打包壓縮圖片或附件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue實現(xiàn)購物車計算總價功能
這篇文章主要為大家詳細介紹了Vue實現(xiàn)購物車計算總價功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04