# dialog - [权限列表](#zh-cn_topic_0000001059148550_section11257113618419) - [子组件](#zh-cn_topic_0000001059148550_section9288143101012) - [属性](#zh-cn_topic_0000001059148550_section2907183951110) - [事件](#zh-cn_topic_0000001059148550_section20424336163815) - [样式](#zh-cn_topic_0000001059148550_section5775351116) - [方法](#zh-cn_topic_0000001059148550_section11753103216253) - [示例](#zh-cn_topic_0000001059148550_section6663311114620) 自定义弹窗容器。 ## 权限列表无 ## 子组件支持单个子组件。 ## 属性

名称	类型	默认值	必填	描述
id	string	-	否	组件的唯一标识。
style	string	-	否	组件的样式声明。
class	string	-	否	组件的样式类，用于引用样式表。
ref	string	-	否	用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。
disabled	boolean	false	否	当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。
data	string	-	否	给当前组件设置data属性，进行相应的数据存储和读取。

## 事件

名称	参数	描述
cancel	-	用户点击非dialog区域触发取消弹窗时触发的事件。

## 样式支持如下样式：

名称	类型	默认值	必填	描述
width	<length> \| <percentage>	-	否	设置组件自身的宽度。未设置时使用弹窗默认宽度。
height	<length> \| <percentage>	-	否	设置组件自身的高度未设置时使用弹窗默认高度。
margin	<length> \| <percentage>⁵⁺	0	否	使用简写属性设置所有的外边距属性，该属性可以有1到4个值。只有一个值时，这个值会被指定给全部的四个边。两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
margin-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	否	设置左、上、右、下外边距属性。
margin-[start\|end]⁵⁺	<length>	0	否	设置起始和末端外边距属性。

## 方法支持如下方法。

名称	参数	描述
show	-	弹出对话框
close	-	关闭对话框

>![](public_sys-resources/icon-note.gif) **说明：** >dialog属性、样式均不支持动态更新。 ## 示例 ```

``` ``` /* xxx.css */ .doc-page { flex-direction: column; justify-content: center; align-items: center; } .btn-div { width: 100%; height: 200px; flex-direction: column; align-items: center; justify-content: center; } .txt { color: #000000; font-weight: bold; font-size: 39px; } .dialog-main { width: 500px; } .dialog-div { flex-direction: column; align-items: center; } .inner-txt { width: 400px; height: 160px; flex-direction: column; align-items: center; justify-content: space-around; } .inner-btn { width: 400px; height: 120px; justify-content: space-around; align-items: center; } ``` ``` // xxx.js import prompt from '@system.prompt'; export default { showDialog(e) { this.$element('simpledialog').show() }, cancelDialog(e) { prompt.showToast({ message: 'Dialog cancelled' }) }, cancelSchedule(e) { this.$element('simpledialog').close() prompt.showToast({ message: 'Successfully cancelled' }) }, setSchedule(e) { this.$element('simpledialog').close() prompt.showToast({ message: 'Successfully confirmed' }) } } ``` ![](figures/GIF6.gif)