The parent component:

    <SendCoupon :sendCouponDialogVisible.sync = "sendCouponDialogVisible"></SendCoupon>
Copy the code

Parent component: data:

sendCouponDialogVisible:false,

Copy the code

Child components:

Ps: Clicking the cross in the upper right corner of the popover or clicking the blank to close is the method to perform the :before-close binding, while clicking cancel is the method to perform the close binding

<template> <el-dialog title=" prompt ":visible="sendCouponDialogVisible" width="30%" :before-close="handleClose" <span> <span slot="footer" class="dialog-footer"> <el-button @click="closeDialog" </el-button> <el-button type="primary" @click="sendCouponDialogVisible = false" > </template> <script> export default { props: { sendCouponDialogVisible:{ type:Boolean } }, name: "SendCoupon", data() { return {}; }, mounted() {}, methods: {handleClose(done) {console.log(); // this.$confirm(" Confirm close? ") ) // .then((_) => { // done(); // }) // .catch((_) => {}); }, closeDialog(){ this.$emit('update:sendCouponDialogVisible',false); }}}; </script> <style lang="scss" scoped> </style>Copy the code

Before-close =”closeDialog”

Fixed body height

<template> <el-dialog class="abow_dialog" title=" send ":visible="sendCouponDialogVisible" width="30%" :before-close="closeDialog" @close="closeDialog" > <div class="el-dialog-div" </div> <div>Element UI Dialog is set to adaptive height. Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI Dialog to adaptive height for only the body part, Scroll </div> <div>Element UI popup to adaptive height for body content only, </div> <span slot="footer" class="dialog-footer" style="text-align: left; </el-button > < span> </el-dialog> < span> </el-button > </template> <script> export default { props: { sendCouponDialogVisible: { type: Boolean, }, }, name: "SendCoupon", data() { return {}; }, mounted() {}, methods: {handleClose(done) {console.log(" here "); // this.$confirm(" Confirm close? ") ) // .then((_) => { // done(); // }) // .catch((_) => {}); }, closeDialog() { this.$emit("update:sendCouponDialogVisible", false); ,}}}; </script> <style lang="scss" scoped> ::v-deep .el-dialog__footer { text-align: center; } .el-button { width: 138px; } .el-dialog-div { height: 60vh; overflow: auto; } </style>Copy the code