如何将location-strategy为static的Vuetify v-overlay内容定位到底部？

要让v-card固定在v-overlay的屏幕底部，你需要调整v-overlay的flex布局对齐方式，而非依赖location属性（该属性主要控制overlay自身的定位上下文，而非内部内容的位置）。

修改后的代码 #

<template>
  <v-app>
    <v-container>
      <v-btn @click="showOverlay">click me</v-btn>
      <v-btn @click="showOverlay">click me</v-btn>
      <v-btn @click="showOverlay">click me</v-btn>
      <!-- 添加align-items-end类让内容靠底部对齐 -->
      <v-overlay v-model="overlay" class="align-items-end">
        <v-card style="width: 100vw; margin: 0;">
          <v-card-text>
            <v-list class="d-flex">
              <v-list-item @click="hideOverlay">click me to hide</v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-overlay>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
const overlay = ref(false)
const showOverlay = () => {
  overlay.value = true
}
const hideOverlay = () => {
  overlay.value = false
}
const msg = ref('Hello World!')
</script>

关键说明 #

• v-overlay默认是flex容器，默认对齐方式为align-items: center，添加align-items-end类会强制内部元素靠容器底部对齐
• 移除了location-strategy="static"，因为要实现屏幕底部固定，需要overlay相对于视口定位（默认行为），static策略会让overlay相对于父元素定位，不符合需求
• 给v-card添加margin:0是为了清除默认的上下间距，让卡片完全贴紧屏幕底部

内容的提问来源于stack exchange，提问作者Alex