Блог

При использовании компонента V-Window Vuetifies я распознал, что левая и правая кнопки прыгают при перемещении влево или вправо. Даже на их примерах это так: https://vuetifyjs.com/en/components/windows/#customized-arrows

Может ли кто-нибудь сказать, как это можно исправить наилучшим образом для примера «настроенные стрелки»?

Вы можете установить высоту в компоненте v-windows, чтобы решить эту проблему.

https://codepen.io/vinisalves/pen/yLVGVjZ?editors=1010

 <div id="app">
  <v-app id="inspire">
    <v-card
      color="black"
      dark
      flat
      tile
    >
      <v-window v-model="onboarding" style="height: 200px"> <!-- here -->
        <v-window-item
          v-for="n in length"
          :key="`card-${n}`"
        >
          <v-card
            color="transparent"
            height="200"
          >
            <v-row
              class="fill-height"
              align="center"
              justify="center"
            >
              <v-card-text>
                Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.
              </v-card-text>
            </v-row>
          </v-card>
        </v-window-item>
      </v-window>
  
      <v-card-actions class="justify-space-between">
        <v-btn
          text
          @click="prev"
        >
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
        <v-item-group
          v-model="onboarding"
          class="text-center"
          mandatory
        >
          <v-item
            v-for="n in length"
            :key="`btn-${n}`"
            v-slot="{ active, toggle }"
          >
            <v-btn
              :input-value="active"
              icon
              @click="toggle"
            >
              <v-icon>mdi-record</v-icon>
            </v-btn>
          </v-item>
        </v-item-group>
        <v-btn
          text
          @click="next"
        >
          <v-icon>mdi-chevron-right</v-icon>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</div>