はじめに
最近、私はWebアプリの画面改修案件に参加しています。
その案件ではVueとVuetifyを使っています。
これまではタブレットで画面を表示していましたが、今回の改修ではスマホでも
画面を表示することになりました。
画面ではCardコンポーネントを使っており、今回の改修により、スマホで表示したときはCardの高さ（縦幅）を変える必要がありました。
この辺りのノウハウが書かれた記事がなかったので、
本記事ではCardの高さを画面サイズに合わせて動的に変更する方法について記載します。
環境情報
Vue：3.2.0
Vuetify：3.0.0
手順
まず、画面にCardコンポーネントを表示します。
<template>
<v-app>
<v-card
width="400"
title="This is a title"
subtitle="This is a subtitle"
text="This is content"
>
</v-card>
</v-app>
</template>
こんな感じに表示されます。
次にVuetifyインスタンスを取得する関数を追加します。
scriptタグに以下のソースコードを追加します。
<script lang="ts" setup>
import { computed,getCurrentInstance } from 'vue';
const usevuetify = () => {
const instance = getCurrentInstance()
if (!instance) {
throw new Error(`vuetify instance doesn't exist`)
}
return instance.proxy.$vuetify
}
</script>
次に、画面サイズに応じてCardの高さを返すcomputedプロパティを定義します。
この中では、Vuetifyインスタンスのdisplayプロパティを使用します。
displayプロパティの中に、画面幅のブレイクポイントのプロパティが含まれています（xsやmdなど）。
各ブレイクポイントのプロパティはboolean値です。
画面が各ブレイクポイントで指定されている幅未満だった場合trueとなります。
例えば、xsプロパティは画面が600px未満（スマホサイズ）の時にtrueとなります。
これらのブレイクポイントプロパティを使って、画面サイズに応じてCardの高さを動的に返すcomputedプロパティ（getCardHeight）を定義します。
今回はスマホサイズとそれ以外でCardの高さを変えてみます。
スマホとそれ以外で高さを変えたいので、xsプロパティを使います。
以下では、画面がスマホサイズ（=xsがtrue）の場合、450を返し、
それ以外（=xsがfalse）では250を返します。
<script lang="ts" setup>
import { computed,getCurrentInstance } from 'vue';
const usevuetify = () => {
const instance = getCurrentInstance()
if (!instance) {
throw new Error(`vuetify instance doesn't exist`)
}
return instance.proxy.$vuetify
}
const getCardHeight = computed(function() {
try {
const vuetify = usevuetify();
return vuetify.display.xs ? 450 : '250';
} catch(err) {
console.log(err);
}
})
</script>
templateタグのCardコンポーネントのheightプロパティに、↑で定義したgetCardHeightを指定します。
<template>
<v-app>
<v-card
width="400"
:height="getCardHeight"
title="This is a title"
subtitle="This is a subtitle"
text="This is content"
>
</v-card>
</v-app>
</template>
最終的にソースコードは以下のようになります。
<script lang="ts" setup>
import { computed,getCurrentInstance } from 'vue';
const usevuetify = () => {
const instance = getCurrentInstance()
if (!instance) {
throw new Error(`vuetify instance doesn't exist`)
}
return instance.proxy.$vuetify
}
const getCardHeight = computed(function() {
try {
const vuetify = usevuetify();
return vuetify.display.xs ? 450 : '250';
} catch(err) {
console.log(err);
}
})
</script>
<template>
<v-app>
<v-card
width="400"
:height="getCardHeight"
title="This is a title"
subtitle="This is a subtitle"
text="This is content"
>
</v-card>
</v-app>
</template>
実際に画面に表示してみます。
・スマホ以外のサイズで表示した場合
・スマホサイズで表示した場合
（PCブラウザの横幅をスマホサイズ並にして表示してます）
Cardの高さが変わってますね。
参考資料