Vuetify3：如何让v-dialog在触发按钮附近弹出

Vuetify文档提到v-dialog默认应相对父触发元素显示，但实际无论哪种激活方式都居中显示。要实现类似v-menu在触发按钮旁弹出的效果，可通过以下方法解决：

核心方案：使用attach属性 #

v-dialog的attach属性可将对话框挂载到指定元素上，使其定位上下文绑定到触发元素，从而实现跟随触发按钮弹出的效果：

<template>
  <v-btn id="dialog-trigger" @click="dialogVisible = true">打开对话框</v-btn>
  
  <v-dialog 
    v-model="dialogVisible" 
    :attach="'#dialog-trigger'" 
    persistent
  >
    <v-card>
      <v-card-title class="headline">自定义位置对话框</v-card-title>
      <v-card-text>这是绑定到触发按钮旁的对话框内容</v-card-text>
      <v-card-actions>
        <v-btn @click="dialogVisible = false" color="primary">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>

微调位置（可选） #

如果需要调整对话框与触发按钮的间距或位置，可通过深度选择器修改样式：

<style scoped>
:deep(.v-dialog) {
  margin-top: 8px; /* 增加顶部间距，避免与按钮重叠 */
}
</style>

为什么之前的CSS无效？ #

你之前的CSS将对话框固定定位到屏幕左下角，是基于视口的绝对定位，没有关联触发元素的位置。而attach属性会改变对话框的挂载上下文，让其定位相对于触发元素计算，这才是实现跟随效果的关键。

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