v-dialog 未按预期格式化

Question

当前对话框显示如下。

预计如下图

html 标记

  <v-dialog v-model="dialog" width="500">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on">Click</v-btn>
    </template>
    <v-card>
      <v-card-title primary-title>Details</v-card-title>
      <v-card-text>Hello</v-card-text>
    </v-card>
  </v-dialog>

脚本的数据属性中有dialog。 我正在尝试实现与文档中所示相同的外观。 使用"vuetify": "^2.0.1","vuetify-loader": "^1.3.0"

Answer 1

需要在 v-card-title 中添加“grey lighten-2”来实现灰色背景效果。如果您还需要分隔线和操作按钮，请将以下内容添加到您的代码中：

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="primary"
              text
              @click="dialog = false"
            >
              I accept
            </v-btn>
          </v-card-actions>

文档的代码是here。