透過 Vuetify3 取得瀏覽器寬度和高度

筆者原本是使用 vue-screen-utils 套件來計算螢幕寬度，並依照螢幕尺寸轉換為元件列數

    
import {useScreens} from 'vue-screen-utils';

const {mapCurrent} = useScreens({xs: '0px', sm: '640px', md: '768px', lg: '1024px'});
const columns = mapCurrent({xs: 1, sm: 2, md: 3, lg: 4}, 2);
    

但是發現很容易就會卡在預設值，需要手動調整畫面後才會正確取得。這個 Side Project 用的是 Vuetify3 ，研究了一下後發現 Vuetify3 也有很方便取得螢幕寬度的功能，特此紀錄一下:

    
<script setup lang="ts">

import {useDisplay} from "vuetify";

const {width, height, mobile} = useDisplay();

const columns = computed(() => {
    console.log(`寬度: ${width.value}`);
    console.log(`高度: ${height.value}`);
    console.log(`是否為手機板: ${mobile.value}`);

    const value = width.value;
    switch (true) {
        case value < 640:
            return 1;
        case value < 768:
            return 2;
        case value < 1024:
            return 3;
        default:
            return 4;
    }
});

</script>
    

參考資料：
Vuetify - Display & Platform