如何实现Vuetify中v-bottom-sheet对话框的圆角效果？

你遇到的问题是因为v-bottom-sheet的根元素是遮罩层，直接给它加border-radius只会修改遮罩的样式，而对话框内容是嵌套在内部的.v-bottom-sheet__content元素里，所以需要针对这个内部元素设置圆角。

以下是两种可行的解决方案：

方法一：使用深度选择器修改内部样式 #

给v-bottom-sheet添加自定义类，然后通过深度选择器（Vue 2用/deep/，Vue 3用:deep()）选中内部的内容容器设置圆角：

<v-bottom-sheet v-model="sheet" inset class="custom-rounded-sheet">
  <v-sheet class="text-center">
    <h1 style="color:red;">Header</h1>
    <br>
  </v-sheet>
</v-bottom-sheet>

对应的样式（根据你的Vue版本选择）：

/* Vue 2 */
.custom-rounded-sheet /deep/ .v-bottom-sheet__content {
  border-radius: 20px 20px 0 0;
  overflow: hidden; /* 防止内容溢出圆角 */
}

/* Vue 3 */
.custom-rounded-sheet :deep(.v-bottom-sheet__content) {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

方法二：直接给内部v-sheet设置圆角 #

如果内部的v-sheet是对话框的主体容器，也可以直接给它设置圆角，同时将v-bottom-sheet的背景设为透明，避免遮罩的圆角干扰：

<v-bottom-sheet v-model="sheet" inset style="background: transparent;">
  <v-sheet class="text-center" style="border-radius:20px 20px 0 0;">
    <h1 style="color:red;">Header</h1>
    <br>
  </v-sheet>
</v-bottom-sheet>

注意：这种方法需要确保内部v-sheet充满整个底部对话框的空间，否则可能会出现空隙。

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