elementUI之Dialog对话框详解_elementui dialog

Dialog 对话框

引入方式：

//按需：
	import {Dialog} from 'element-ui'
//注册：
	Vue.use(Dialog);
1
2
3
4

常用属性：

属性：

solt插槽：

事件：

使用分析：

//html:
<el-dialog
 :visible.sync="dialogVisible" //是否显示 Dialog，支持 .sync 修饰符 默认false
  title="提示"  //设置标题
  width="50%"  //设置Dialog 的宽度默认50%
	:fullscreen=false //dialog是否占满全屏 默认false
	top='15vh' //Dialog CSS 中的 margin-top 值 默认15vh  其他单位也可以
	:modal=true //是否需要遮罩层 默认true   
	:append-to-body=false //Dialog自身是否插入至body元素上,嵌套的Dialog必须指定该属性并赋值为true,默认false
	:lock-scroll=true //是否在Dialog出现时将body滚动锁定 默认值true 如果设置了取消遮罩层 该属性设置锁定时失效
	custom-class='className' //给dialog自定义一些样式
	:close-on-click-modal=true //是否可以通过点击遮罩层关闭Dialog默认true  
	:close-on-press-escape=true //是否可以通过按下 ESC 关闭 Dialog 默认true 
	:show-close='true' //是否显示右上角的关闭(x)按钮 这个属性 
  :before-close="handleClose" //关闭前的回调会暂停Dialog的关闭 
				//回调函数里一定要传done，执行完想要执行的逻辑后，调用done() 否则不会关闭dialog
	:center='false' //默认false 是否对头部和底部采用居中布局  
	:destroy-on-close='false' //关闭时销毁 Dialog 中的元素 
	
//事件：
        @open='fn'				//Dialog 打开的回调 methods里边定义fn
        @opened='fn'			//Dialog 打开动画结束时的回调
        @close='fn'				//Dialog 关闭的回调
        @closed='fn'	//Dialog 关闭动画结束时的回调
>
    
  <span slot="title">标题内容</span>  //标题复杂的时候用这个
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">  //footer具名插槽
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33