快捷導(dǎo)航

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

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

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

前言

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

切屏監(jiān)控

方法一

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

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) { // 當(dāng)前頁被隱藏
        // 執(zhí)行相關(guān)操作
      } else { // 當(dāng)前頁被打開
        // 執(zhí)行相關(guān)操作
      }
    }
  }
};

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

方法二

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

具體代碼如下：

export default {
  data() {
    return {
      isActive: false, // 標(biāo)志頁面是否處于活動狀態(tài)
      isHidden: false, // 標(biāo)志頁面是否處于隱藏狀態(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)。

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

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

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

小窗監(jiān)控

方法一

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

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

具體的實現(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 前后檢查視口大小并輸出結(jié)果。

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

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

方法二

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

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

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

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

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

方法三

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

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

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