soc_web/src/components/message/threeStateMessageBox.vue

<template>
  <DialogCom
    @closed="onClose"
    class="elDialog"
    :title="title"
    :visible.sync="isShow"
    width="500px"
  >
    <div>{{ message }}</div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="onYes">是</el-button>
      <el-button size="small" @click="onNo">否</el-button>
      <el-button size="small" @click="onCanel">取消</el-button>
    </div>
  </DialogCom>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      message: "",
      title: "提示",
      callback: null,
      state: null, //0否，1：是，2取消
    };
  },
  methods: {
    /**
     * option:扩展
     */
    show(message, callback, option) {
      this.isShow = true;
      this.message = message;
      this.callback = callback;
    },
    onYes() {
      this.state = 1;
      this.isShow = false;
    },
    onNo() {
      this.state = 0;
      this.isShow = false;
    },
    onCanel() {
      this.state = 2;
      this.isShow = false;
    },
    onClose() {
      this.callback && this.callback(this.state);
    },
  },
};
</script>
<style lang="scss" scoped>
.elDialog {
  ::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    top: 40%;
    left: 50% !important;
    transform: translate(-50%, -50%);
  }

  ::v-deep .el-dialog__header {
    position: relative;
    padding: 15px;
    padding-bottom: 10px;
    height: 43px;
  }

  ::v-deep .el-dialog__body {
    padding: 10px 15px;
    color: #606266;
    font-size: inherit;
  }

  ::v-deep .dialog-footer {
    padding: 5px 15px 0;
    text-align: right;
  }
}
</style>