Vue3如何監控螢幕縮放?

vite vue3 screen

greenriver 2022-07-18 16:24:48 ‧ 3010 瀏覽

分享至

大家好，
我想請問為什麼使用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 }} |

直播中

3 個回答

通靈亡

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>