Dialogs Component — Vuetify.js

对话框

v-dialog 组件用来通知用户有关特定任务的信息，并且可能包含重要信息，需要作出决定或者涉及多任务；应谨慎使用对话框，因为它是中断的。

用例

A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.

API

props

slots

名称

attach

默认值

false

类型

any

指定该组件应该分离到哪个DOM元素，使用CSS选择器字符串或元素的对象应用。

名称

content-class

默认值

undefined

类型

any

将自定义类应用于分离的元素。这是很有用的，因为内容被移动到应用程序的末尾，而不是直接通过组件传递给类。

名称

dark

默认值

false

类型

boolean

Components.Dialogs.

名称

disabled

默认值

false

类型

boolean

禁用打开对话框

名称

full-width

默认值

false

类型

boolean

指定模态框强制100%宽度

名称

fullscreen

默认值

false

类型

boolean

改变布局全屏显示

名称

hide-overlay

默认值

false

类型

boolean

隐藏遮罩

名称

lazy

默认值

false

类型

boolean

有条件地渲染内容，只有激活时才会渲染内容

名称

light

默认值

false

类型

boolean

Components.Dialogs.

名称

max-width

默认值

none

类型

string | number

内容的最大宽度

名称

no-click-animation New in — v1.1

默认值

false

类型

boolean

Components.Dialogs.

名称

origin

默认值

'center center'

类型

string

设置过渡原点

名称

persistent

默认值

false

类型

boolean

点击对话框外部不能使其关闭

名称

return-value

默认值

undefined

类型

any

Components.Dialogs.

名称

scrollable

默认值

false

类型

boolean

当包含card, card-title, card-text 以及 card-actions这几个的对话框可滚动设为 true 的时候； card-text 应该指定高度并且设置 overflow-y

名称

transition

默认值

dialog-transition

类型

string | boolean

Components.Dialogs.

名称

value

默认值

undefined

类型

any

控制可见性

名称

width

默认值

auto

类型

string | number

设置对话框的宽度

示例

没有激活器

如果因为某些原因而不能使用 activator slot(激活器插槽)，请确保将.stop修饰符添加到触发对话框的事件。

模态框

类似于简单对话框，除了说点击对话框外部不会关闭外。

全屏对话框

由于空间的限制，全屏对话框可能更适用于移动设备，相对大屏设备来说。

表单对话框

这里有一个简单的表单对话框的例子。

可滚动

一个可滚动内容的对话框示例

溢出

如果内容溢出有效窗口空间，将会滚动容器

Simple dialogs

Choosing an option immediately closes the menu. Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog.

Loader

The v-dialog component makes it easy to create a customized loading experience for your application.

Up Next

Edit this page | language on Github

— Contribution Guide