iT邦幫忙

0

Vue3如何監控螢幕縮放?

  • 分享至 

  • xImage

大家好,
我想請問為什麼使用watch去監控螢幕縮放,是無效的?

//螢幕縮放時,沒有作用
<script setup>
    import { watch } from 'vue';
    watch(()=>window.screen.width,(newVal)=>{
        console.log(newVal);
    })
</script>

必須使用window.addEventListener才有作用

<script setup>
    window.addEventListener('resize',()=>{
        console.log(window.screen.width);
    })
</script>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
通靈亡
iT邦高手 1 級 ‧ 2022-07-18 18:48:11
最佳解答

Q: 我想請問為什麼使用 watch 去監控螢幕縮放,是無效的?
watch 監聽的東西必須是 vue 的 ref/reactive 變數,但 window.screen.width 不是

Q: 必須使用 window.addEventListener 才有作用
你那樣的寫法並不是透過 vue 去監控 window.screen.width,而是使用原生的 resize 偵聽事件。這樣子做無法直接拿到 vue 元件的 <template> 使用

如果你要把 resize 監聽的結果拿到 Vue 使用,你仍然需要宣告一個 ref/reactive 變數來接。
在 onMounted 的時候監聽 resize 事件,並且在 onUnmounted 取消監聽 resize 事件

範例:
https://stackblitz.com/edit/vitejs-vite-siwv1z?file=src%2FApp.vue&terminal=dev

題外話,這邊是用樓主問題說的監聽螢幕解析度大小,縮放視窗不會有改變
如果要監聽網頁畫面的大小縮放,而非螢幕解析度的大小縮放,可以用 window.innerWidth 與 window.innerHeight

<template>{{ windowWidth }}, {{ windowHeight }}</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue';

let windowWidth = ref(0);
let windowHeight = ref(0);

function resizeWindow() {
  windowWidth.value = window.screen.width;
  windowHeight.value = window.screen.height;
}

onMounted(() => {
  window.addEventListener('resize', resizeWindow);
  resizeWindow();
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeWindow);
});
</script>
greenriver iT邦研究生 4 級 ‧ 2022-07-19 16:32:19 檢舉

謝謝你

1
froce
iT邦大師 1 級 ‧ 2022-07-18 16:33:07
  1. 你watch的必須是一個vue的ref,window不是也沒辦法沒辦法被vue去監控,當然不行。

  2. 像這種對全域做添加事件的,不建議寫在進入口(app.vue)以外的組件裡。萬一你有操作會創建多個組件,會對window添加多次的重複事件。

  3. 範例後補,這個不需要用到onMounted。你可以透過provide、inject或狀態管理套件如pinia去存取這種全域變動值
    範例

greenriver iT邦研究生 4 級 ‧ 2022-07-19 16:32:48 檢舉

謝謝你

0
bendwarn
iT邦新手 5 級 ‧ 2022-07-19 21:52:39

https://vueuse.org/core/useWindowSize/

用 vue3 的話可以多看看這個工具,幾乎將瀏覽器都提取成 vue 可以用的形式。以你的例子來說只要 watch useWindowSize 回傳的 ref 就行了。

我要發表回答

立即登入回答