Vue.js
Vue.jsでウィンドウサイズ(デバイス幅)変更を検知する方法を紹介します。
コンポーネントの切替などにも使えます。
Vue.jsでウィンドウサイズ(デバイス幅)変更を検知する方法
下の例ではメニューの切替を行います。
メニューの内容は関係ないので、それぞれ名前だけ記載します。
HeaderMobileとHeaderというコンポーネントとします。
App.vue
template
<HeaderMobile v-if="mobileView" :items="items"></HeaderMobile>
<Header v-else :items="items"></Header>
mobileViewというbooleanをとる変数を用意して、それのtrue/falseでコンポーネントを切り替えます。
script
import HeaderMobile from '@/components/HeaderMobile.vue'
import Header from '@/components/Header.vue'
export default {
name: 'App',
components: {
HeaderMobile,
Header,
setup(){
// モバイル/PC切替
const mobileView = ref(true)
// windowのwidth
const windowWidth = ref(0)
// windowのwidthでモバイル/PC切替
const calculateWindowWidth = () => {
windowWidth.value = window.innerWidth
// true/false
return mobileView.value = windowWidth.value < 768
// メニューアイテム
const items = reactive([
{href: '#', title: 'Home'},
{href: '#about', title: 'About'},
{href: '#contact', title: 'Contact'},
// resizeでウィンドウサイズ変更を検知
onMounted(() => {
window.addEventListener('resize', calculateWindowWidth)
return{
mobileView,
items,
ウィンドウサイズの変更を検知するためには、イベントリスナーのresizeを使います。
それをmountされたときに設定することでresizeを動的に検知できるようになります。
あとは、変更したい値、上の場合は、768pxの幅とwindowのinnerWidthを比べてtrueやfalseが返るようにメソッドを作成します。
それをイベントリスナーの第二引数に入れることで変更を検知できるようになります。
Vue.js
Posted by devsakaso
