如何调整vuetify vuejs点击按钮打开的v-dialog的位置？

Question

我正在尝试在单击“打开”对话框按钮时使用 v-dialog vuetify 创建一个弹出窗口。我希望弹出窗口出现在按钮下方。类似于下图的东西。

这是代码。我尝试使用position来改变位置，但它没有按预期工作。

<template lang="">
  <v-dialog>
    <template v-slot:activator="{ props: activatorProps }">
      <v-btn
        block
        color="black"
        rounded="2"
        v-bind="activatorProps"
        text="Open popup"
        variant="flat"
        style="z-index: 10"
      ></v-btn>
    </template>
    <template v-slot:default="{ isActive }">
      <v-card class="border-thin w-50 change-position" style="z-index: 9">
        <v-table density="compact" class="border-thin" fixed-header>
          <thead>
            <tr>
              <!--- content of head ------->
            </tr>
          </thead>
          <tbody>
            <!--- content of tbody------->
          </tbody>
        </v-table>
        <v-divider></v-divider>    
      </v-card>
    </template>
  </v-dialog>

</template>

<style scoped>
/* .v-table .v-table__wrapper > table > tbody {
  border-bottom: thin solid grey !important;
} */

:deep() .v-table .v-table__wrapper > table > thead > tr > th:not(:last-child) {
  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
:deep() .v-table .v-table__wrapper > table > tbody > tr > td:not(:last-child),
.v-table .v-table__wrapper > table > tbody > tr > th:not(:last-child) {
  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}

.change-position {
  position: absolute;
  right: 0px;
  top: 1px;
}
</style>

如何解决这个问题？

Answer 1

要重写一些样式，最好使用CSS模块，即将scoped改为module。然后将其修复 .v-overload__content 在父级之上。

<style module> 
  .v-overlay__content {
     top: 20px !important;  
  }
</style>