1. Dialog对话框
1.1. Dialog对话框在保留当前页面状态的情况下, 告知用户并承载相关操作。
1.2. Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
visible | 是否显示Dialog, 支持.sync修饰符 | boolean | 无 | false |
title | Dialog的标题, 也可通过具名slot(见下表)传入 | string | 无 | 无 |
width | Dialog的宽度 | string | 无 | 50% |
fullscreen | 是否为全屏Dialog | boolean | 无 | false |
top | Dialog CSS中的margin-top值 | string | 无 | 15vh |
modal | 是否需要遮罩层 | boolean | 无 | true |
modal-append-to-body | 遮罩层是否插入至body元素上, 若为false, 则遮罩层会插入至Dialog的父元素上 | boolean | 无 | true |
append-to-body | Dialog自身是否插入至body元素上。嵌套的Dialog必须指定该属性并赋值为true | boolean | 无 | false |
lock-scroll | 是否在Dialog出现时将body滚动锁定 | boolean | 无 | true |
custom-class | Dialog的自定义类名 | string | 无 | 无 |
close-on-click-modal | 是否可以通过点击modal关闭Dialog | boolean | 无 | true |
close-on-press-escape | 是否可以通过按下ESC关闭Dialog | boolean | 无 | true |
show-close | 是否显示关闭按钮 | boolean | 无 | true |
before-close | 关闭前的回调, 会暂停Dialog的关闭 | function(done), done用于关闭Dialog | 无 | 无 |
center | 是否对头部和底部采用居中布局 | boolean | 无 | false |
destroy-on-close | 关闭时销毁Dialog中的元素 | boolean | 无 | false |
1.3. Slot
Name | 说明 |
— | Dialog的内容 |
title | Dialog标题区的内容 |
footer | Dialog按钮操作区的内容 |
1.4. Events
事件名称 | 说明 | 回调参数 |
open | Dialog打开的回调 | 无 |
opened | Dialog打开动画结束时的回调 | 无 |
close | Dialog关闭的回调 | 无 |
closed | Dialog关闭动画结束时的回调 | 无 |
1.5. Dialog的内容是懒渲染的, 即在第一次被打开之前, 传入的默认slot不会被渲染到DOM上。因此, 如果需要执行DOM操作, 或通过ref获取相应组件, 请在open事件回调中进行。
1.6. 如果visible属性绑定的变量位于Vuex的store内, 那么.sync不会正常工作。此时需要去除.sync修饰符, 同时监听Dialog的open和close事件, 在事件回调中执行Vuex中对应的mutation更新visible属性绑定的变量的值。
2. Dialog对话框例子
2.1. 使用脚手架新建一个名为element-ui-dialog的前端项目, 同时安装Element插件。
2.2. 编辑index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Dialog from '../components/Dialog.vue'
import MySelfDialog from '../components/MySelfDialog.vue'
import InnerDialog from '../components/InnerDialog.vue'
import CenterDialog from '../components/CenterDialog.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', redirect: '/Dialog' },
{ path: '/Dialog', component: Dialog },
{ path: '/MySelfDialog', component: MySelfDialog },
{ path: '/InnerDialog', component: InnerDialog },
{ path: '/CenterDialog', component: CenterDialog }
]
const router = new VueRouter({
routes
})
export default router
2.3. 在components下创建Dialog.vue
<template>
<div>
<h1>基本用法</h1>
<h4>需要设置visible属性, 它接收Boolean, 当为true时显示Dialog。Dialog分为两个部分: body和footer, footer需要具名为footer的slot。title属性用于定义标题, 它是可选的, 默认值为空。最后, 本例还展示了before-close的用法。</h4>
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
dialogVisible: false
}
},
methods: {
handleClose (done) {
this.$confirm('确认关闭?')
.then(_ => {
done()
})
.catch(_ => {})
}
}
}
</script>
2.4. 在components下创建MySelfDialog.vue
<template>
<div>
<h1>自定义内容</h1>
<h4>Dialog组件的内容可以是任意的, 甚至可以是表格或表单, 下面是应用了Element Table和Form组件的两个样例。</h4>
<!-- Table -->
<el-button type="success" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
<div style="margin-top: 20px;"></div>
<!-- Form -->
<el-button @click="dialogFormVisible = true" type="primary">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
}
}
}
</script>
2.5. 在components下创建InnerDialog.vue
<template>
<div>
<h1>嵌套的Dialog</h1>
<h4>正常情况下, 我们不建议使用嵌套的Dialog, 如果需要在页面上同时显示多个Dialog, 可以将它们平级放置。对于确实需要嵌套Dialog的场景, 我们提供了append-to-body属性。将内层Dialog的该属性设置为true, 它就会插入至body元素上, 从而保证内外层Dialog和遮罩层级关系的正确。</h4>
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
<el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body></el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">取 消</el-button>
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
outerVisible: false,
innerVisible: false
}
}
}
</script>
2.6. 在components下创建CenterDialog.vue
<template>
<div>
<h1>居中布局</h1>
<h4>将center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog的内容是任意的, 在一些情况下, 内容并不适合居中布局。如果需要内容也水平居中, 请自行为其添加CSS。</h4>
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
<span>需要注意的是内容是默认不居中的</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
centerDialogVisible: false
}
}
}
</script>
2.7. 运行项目, 访问http://localhost:8080/#/Dialog
2.8. 运行项目, 访问http://localhost:8080/#/MySelfDialog
2.9. 运行项目, 访问http://localhost:8080/#/InnerDialog
2.10. 运行项目, 访问http://localhost:8080/#/CenterDialog