v对话未按预期格式格式化

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>

该脚本的data属性中有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。