소개

Vuetify는 그리드 시스템을 갖추고 있어 이를 활용하면 윈도우의 가로폭에 대해 컨텐츠가 동적으로 배치·조정됩니다.

그리드 시스템
htps : // ゔ에치 fyjs. 코 m / 자 / 코 m 포넨 ts / g ds /

다만, 윈도우의 세로폭에 대한 배치·조정이 마음대로 되지 않는 장면이 있었기 때문에, 조사·실시한 결과를 남깁니다.

구체적으로 설명하는 것

다음과 같은 4개의 메뉴 버튼(아이콘은 적당)을 표시하는 화면이 있었다고 해서


세로 폭의 큰 여백이 신경이 쓰이므로, 다음과 같이 화면의 세로 폭이 메워지도록 메뉴 버튼을 표시할 수 있도록 하고 싶습니다.


※ iPhone의 경우는 이렇게 할 수 있습니다. 화면 크기가 변경되어도 실제 화면에 따라 메뉴 버튼의 크기가 조정됩니다.

환경

Vue.js 2.6.12

Vuetify 2.3.10

결론

Home.vue

<template>
  <div class="Home">
    <v-container fluid >
      <v-row>
        <v-col cols="12">
          <v-row v-resize="onResize" :style="style" >
            <v-col cols="6" v-for="menu in menus" v-bind:key="menu.key">
              <v-btn
                color="accent"
                block
                height='100%'
              >
                <v-icon :size="iconSize">{{menu.icon}}</v-icon>
              </v-btn>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>

  export default {
    name: 'Home',
    data: () => ({
      menus: [
        { title: 'home', icon: 'mdi-home' },
        { title: 'currency', icon: 'mdi-currency-cny' },
        { title: 'gift', icon: 'mdi-gift' },
        { title: 'kaji', icon: 'mdi-washing-machine'},
      ],
      windowSize: {
        x: 0,
        y: 0,
      },
      iconSize: 0 
    }),

    mounted () {
      this.onResize()
    },

    computed: {
      style () {
        return 'height: ' + this.windowSize.y * 0.8 + 'px;'
      }
    },

    methods: {
      onResize () {
        this.windowSize = { x: window.innerWidth, y: window.innerHeight }
        this.iconSize = window.innerHeight * 0.1
      },
    },
    components: {
    },
  }
</script>

상세

기본 정책으로는 window 객체에서 얻은 창 크기에 따라 콘텐츠 스타일을 설정합니다.

또한 윈도우 크기를 변경할 때 호출되는 콜백 함수를 제공하여 윈도우 크기에 따라 스타일도 업데이트되도록 합니다.

Resizing directive
htps : // ゔ에치 fyjs. 코 m/쟈/ぢれcちゔぇs/레시진g/

이 근처의 구현은 이하가 해당합니다.
mounted에서도 onResize()를 호출하여 처음 표시할 때 windowSize에 값이 저장되도록 합니다.
computed의 style()은 지시어로 설정하는 스타일로서 windowSize의 값에 따라 height의 픽셀을 돌려주도록 하고 있습니다. 윈도우 사이즈의 0.8배로 하고 있는 것은 결정 치고입니다.

또한 onResize()로 아이콘 크기를 동적으로 변경하도록 했습니다. 윈도우 사이즈 세로폭의 0.1배로 하고 있는 것은, 이것 또 결정타치입니다.

<script>
  export default {
    name: 'Home',
    data: () => ({
      windowSize: {
        x: 0,
        y: 0,
      },
    }),

    mounted () {
      this.onResize()
    },

    computed: {
      style () {
        return 'height: ' + this.windowSize.y * 0.8 + 'px;'
      }
    },

    methods: {
      onResize () {
        this.windowSize = { x: window.innerWidth, y: window.innerHeight }
        this.iconSize = window.innerHeight * 0.1
      },
    },
</script>

onResize(콜백 함수) 및 style 설정은 콘텐츠()의 부모 요소()에서 설정합니다.
여기서 필요한 것은, <v-btn>のheight='100%' 를 설정해 두는 것으로, 버튼이 좋은 느낌에 윈도우 사이즈 세로폭에 맞추어 조정됩니다.

．．．
        <v-col cols="12">
          <v-row v-resize="onResize" :style="style" >
            <v-col cols="6" v-for="menu in menus" v-bind:key="menu.key">
              <v-btn
                color="accent"
                block
                height='100%'
              >
                <v-icon :size="iconSize">{{menu.icon}}</v-icon>
              </v-btn>
            </v-col>
          </v-row>
        </v-col>
．．．

이상입니다.