element 模态框组件封装 用sync

草莓千层蛋糕
1,061 阅读4分钟

父组件：

    <SendCoupon :sendCouponDialogVisible.sync = "sendCouponDialogVisible"></SendCoupon>

父组件：data：

sendCouponDialogVisible:false,

子组件：

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

image.png

注意： @close="closeRelevanceDialog" :before-close="beforeClose" 两者同时存在 就是确认 与 取消就会 执行 closeRelevanceDialog把 显示变量改为false 而叉号与遮罩就会执行beforeClose

如果只有 @close="closeRelevanceDialog" 按钮确认取消 叉号与遮罩都会执行closeRelevanceDialog

<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>

底部插槽：

v-slot:default 表示使用默认插槽

父组件中可以使用缩写<template #header> 代替  < template v-slot:header >

   <template #footer>
        <span class="dialog-footer">
          <el-button @click="powerCancel">取 消</el-button>
          <el-button type="primary" @click="powerSubmitForm">确 定</el-button>
        </span>
      </template>
avatar
文章
阅读
粉丝