# dialog弹窗
看代码：
### 组件
```
~~~
<div class="dialog">
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<!-- appendToBody 是否嵌套 默认 false ,嵌套的 Dialog 必须指定该属性并赋值为 true-->
<component-dialog
:title="'Dialog弹窗'"
:width="50"
:visible.sync="dialogVisible"
:appendToBody='false'
:beforeClose="beforeClose1"
:beforeCancel="beforeCancel1"
:beforeOk="beforeOk1"
@cancel="handleCancel"
@ok="handleOk">
<div slot="dialog">
<span>这是 Dialog 弹窗封装组件</span>
<component-upload :action="'#'" :previewImages="url" :appendToBody="true"></component-upload>
</div>
</component-dialog>
</div>
~~~
```
需要注意的是：element 中 在弹窗嵌套弹窗的时候，必须加上 ``` append-to-body ```，而这里是 ```appendToBody='true'```,且 ```
beforeClose```、```beforeCancel```、```beforeOk``` 虽然是属性，但均为函数。
