---
title: Dialog 对话框
description: 对话框是一种临时窗口，通常在不想中断整体任务流程，但又需要为用户展示信息或获得用户响应时，在页面中打开一个对话框承载相应的信息及操作。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: { code: "swimly", doc: "swimly" }
---

## 基本用法

可通过`visible`来控制对话框的显示和隐藏状态。

{{ base }}

## 主题

通过`theme`可设置不同形式的对话框，可选：`info` `success` `warning` `danger`，主要表现在不同的图标。

{{ theme }}

## 类型

通过`mode`设置对话框类型，有 4 种：`模态对话框`、`非模态对话框`、`普通对话框`、`全屏对话框`。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件

{{ mode }}

## 可拖拽

通过`draggable`属性设置对话框可进行拖拽移动位置，该属性仅在`modeless`非模态对话框中有效。

{{ draggable }}

## 弹出位置

用来控制对话框弹出的垂直方向的位置信息，可分为`大致位置`和`绝对位置`

### 相对位置

通过`placement`可设置弹出对话框的位置，可选：`top`，`center`。

{{ placement }}

### 绝对位置

通过`top`可设置对话框距离顶部的位移，值类型为：`string`，`number`，当设置了 top 之后，placement 将失效。

{{ top }}

## 宽度

通过`width`可设置弹出对话框的宽度，支持数字和字符串，当值为数字的时候，则代表`xx px`，也可设置固定单位的字符串，例如
：`400px`，`50%`。

{{ width }}

## 遮罩

通过`showOverlay`属性控制弹出对话框的时候是否显示遮罩，当显示遮罩的时候，默认点击遮罩会关闭当前对话框。

> 注意：该属性仅针对`modal`模态对话框有效。

{{ overlay }}

## 挂载元素

通过`attach`设置对话框挂载的节点，默认挂在组件本身的位置。数据类型为 `String` 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。

> 注意：父层元素一定要加`position:relative`。

{{ attach }}

## 函数调用

提供了 2 种函数调用方式：`this.$dialog`：直接可调用，`DialogPlugin`：需要先引入。

两种方式都可以直接使用，并且提供了`confirm`和`alert`方法。

例如
：`this.$dialog(options)`和`DialogPlugin(options)`，`this.$dialog.confirm(options)`和`DialogPlugin.confirm(options)`，`this.$dialog.alert(options)`和`DialogPlugin.alert(options)`。

获取组件实例：`instance = this.$dialog(options)`或者`DialogPlugin(options)`，组件实例提供如下方法：

**销毁：** instance.`destroy()`，**隐藏：** instance.`hide()`，**显示：** instance.`show()`，**更新：**
instance.`update()`

{{ plugin }}
