弹窗模板

<template>
  <el-dialog
    class="abow_dialog"
    title="作废"
     v-alterELDialogMarginTop="{ marginTop: '8vh' }"
    :visible="outDialogVisible"
    width="40%"
    :close-on-click-modal="false"
    :before-close="closeDialog"
    @close="closeDialog"
  >
    <div class="el-dialog-div"></div>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    outDialogVisible: {
      type: Boolean,
    },
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {
    handleClose(done) {
      console.log("来到这里");
      //   this.$confirm("确认关闭？")
      //     .then((_) => {
      //       done();
      //     })
      //     .catch((_) => {});
    },
    closeDialog() {
      this.$emit("update:outDialogVisible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  text-align: center;
}
.el-button {
  width: 80px;
}
.el-dialog-div {
  height: 60vh;
  overflow: auto;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e4e4e4 !important;
}
::v-deep .el-dialog__footer {
  border-top: 1px solid #e4e4e4 !important;
   text-align: right !important;
}
</style>