vue.js - v-dialog 未按预期格式化
问题描述
当前对话框显示如下。
预计如下所示
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
在 data 属性中。我正在尝试实现与文档中所示相同的外观。使用"vuetify": "^2.0.1",
"vuetify-loader": "^1.3.0"
解决方案
需要在 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>
文档的代码在这里。
推荐阅读
- excel - 如何将“条件格式>图标集”中的图标添加到单个单元格?
- azure - SSH 私钥存储在 Azure 中的什么位置?
- r - R使用Purrr Map函数计算KMeans模型的轮廓距离
- java - 我们可以避免将所有字段映射到springdata中的实体类以进行弹性搜索,因为我在json文档中有100多个字段吗?
- node.js - 为什么 make-promises-safe 仅用于“在顶级程序代码中”
- javascript - ReferenceError:虽然我使用的是 puppeteer,但未定义文档
- python - 过滤 pytest 固定装置
- git - 如何在没有快进的情况下取消合并和重新合并?
- python - 无法将 CustomModel 分配给 QQmlListModel
- javascript - 检查 setInterval 内的条件时,clearInterval 不起作用