eep_page/src/views/book/courseware/create/components/WarnSave.vue

<template>
  <el-dialog
    custom-class="warn-save"
    width="230px"
    :visible="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <span class="warning">警告</span>
    <span>当前有内容未保存</span>

    <template slot="footer">
      <el-button type="info" @click="directQuit">直接退出</el-button>
      <el-button type="primary" @click="saveAndClose">保存并退出</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'WarnSave',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    // 直接退出
    directQuit() {
      this.$emit('update:visible', false);
      this.$emit('directQuit');
    },
    // 保存并退出
    saveAndClose() {
      this.$emit('update:visible', false);
      this.$emit('saveAndClose', 'quit');
    },
  },
};
</script>

<style lang="scss">
.warn-save {
  padding: 0;

  .el-dialog {
    &__header {
      display: none;
    }

    &__body {
      display: flex;
      flex-direction: column;
      row-gap: 8px;
      align-items: center;
      padding-bottom: 10px;

      .warning {
        color: #e22b2b;
      }
    }

    &__footer {
      display: flex;
    }
  }
}
</style>