element 模态框组件封装 用sync

父组件：

    <SendCoupon :sendCouponDialogVisible.sync = "sendCouponDialogVisible"></SendCoupon>
复制代码

父组件：data：

sendCouponDialogVisible:false,

复制代码

子组件：

ps:点击弹窗右上角叉号或者点击空白处关闭 是执行:before-close 绑定的方法 而点击取消是执行close绑定的方法

<template>
  <el-dialog
    title="提示"
    :visible="sendCouponDialogVisible"
    width="30%"
    :before-close="handleClose"
    @close="closeDialog"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="sendCouponDialogVisible = false"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
      sendCouponDialogVisible:{
          type:Boolean
      }
  },
  name: "SendCoupon",
  data() {
    return {};
  },

  mounted() {},

  methods: {
    handleClose(done) {
        console.log("点击空白处或者是右上角的叉号来到这里");
      //   this.$confirm("确认关闭？")
      //     .then((_) => {
      //       done();
      //     })
      //     .catch((_) => {});
    },
    closeDialog(){
        this.$emit('update:sendCouponDialogVisible',false);
    }
  },
};
</script>

<style lang="scss" scoped>
</style>
复制代码

so上面修改为这样： :before-close="closeDialog"

固定body高度

<template>
  <el-dialog
    class="abow_dialog"
    title="发券"
    :visible="sendCouponDialogVisible"
    width="30%"
    :before-close="closeDialog"
    @close="closeDialog"
  >
    <div class="el-dialog-div">
      //省略其他内容
      <span>这是一段信息</span>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
      <div>Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动</div>
    </div>

    <span slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="sendCouponDialogVisible = false"
        >发 放</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    sendCouponDialogVisible: {
      type: Boolean,
    },
  },
  name: "SendCoupon",
  data() {
    return {};
  },

  mounted() {},

  methods: {
    handleClose(done) {
      console.log("来到这里");
      //   this.$confirm("确认关闭？")
      //     .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>
复制代码