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。