element-ui dialog对话框组件的具体使用
element-ui dialog对话框组件的具体使用
对话框的格式:
<el-dialog>
</el-dialog>
dialog的属性
dialog的插槽
插槽比较常用
dialog的事件
常用属性与事件的说明
属性
:visible.sync="dialogVisible" 是否显示对话框,.sync修饰符实时更新数据
参数为boolean类型,为true时显示对话框,为false不显示对话框
:titel="title" 对话框的标题,参数为string类型
width="30%" 对话框的宽度
:append-to-body="true" 对话框自身是否插入到body元素中,(嵌套的对话框该属性必须为true,默认为false)
:before-close="function()" 关闭前的回调,会暂停对话框的关闭,是处理对话框中关闭按钮的事件
事件
@close="function()" 对话框关闭的回调,一般用于清空弹窗中的数据
实例
父组件
<template>
<div class="app-container">
<div class="the-container">
<div>
<el-button type="primary" @click="openDialog">打开对话框</el-button>
</div>
</div>
<Dialog ref="dialog" />
</div>
</template>
<script>
import Dialog from './dialog'
export default {
name: 'Index',
components: {
Dialog
},
data() {
return {
}
},
methods: {
openDialog() {
this.$refs.dialog.show()
}
}
}
</script>
<style lang="scss" scoped>
.app-container{
height: 100%;
background-color: #f1f1f1;
}
.the-container{
height: 100%;
background-color: #fff;
padding: 20px;
display: flex;
justify-content: center;
}
</style>
子组件
<template>
<el-dialog
title="提示"
:visible="dialogVisible"
width="30%"
:append-to-body="true"
@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>
</template>
<script>
export default {
name: 'Dialog',
data() {
return {
dialogVisible: false
}
},
methods: {
show() {
this.dialogVisible = true
},
handleClose() {
this.dialogVisible = false
console.log('close')
}
}
}
</script>
<style scoped>
</style>