筆者原本是使用 vue-screen-utils 套件來計算螢幕寬度,並依照螢幕尺寸轉換為元件列數
但是發現很容易就會卡在預設值,需要手動調整畫面後才會正確取得。這個 Side Project 用的是 Vuetify3 ,研究了一下後發現 Vuetify3 也有很方便取得螢幕寬度的功能,特此紀錄一下:
參考資料:
Vuetify - Display & Platform
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
留言
張貼留言
如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com