qmx_page_admin/src/components/Dialog.vue

<template>
  <el-dialog
    class="custom-dialog"
    :custom-class="customClass"
    v-bind="$props"
    :show-close="showClose"
    :visible="visible"
    @update:visible="update"
    @open="$emit('open')"
    @opened="$emit('opened')"
    @close="$emit('close')"
    @closed="$emit('closed')"
  >
    <slot name="default"></slot>
    <span slot="footer" v-if="showFooter" class="dialog-footer">
      <slot name="footer">
        <button v-if="showCancelButton" class="action-button cancel" @click="onClickCancel">{{ cancelButtonText }}</button>
        <button class="action-button confirm"  :disabled="disabled" @click="onClickConfirm">{{ confirmButtonText }}</button>
      </slot>
    </span>
    </el-dialog>
</template>

<script>
import { Dialog, Button } from 'element-ui'

export default {
  name: 'CustomDialog',
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button
  },
  props: {
    visible: Boolean,
    showClose: Boolean,
    showFooter: {
      type: Boolean,
      default () {
        return true
      }
    },
    top: String,
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '30%'
    },
    'show-close': {
      type: Boolean,
      default: false
    },
    center: {
      type: Boolean,
      default: true
    },
    customClass: {
      type: String,
      default: ''
    },
    showCancelButton: {
      type: Boolean,
      default: true
    },
    confirmButtonText: {
      type: String,
      default: '确定'
    },
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    disabled: Boolean
  },
  methods: {
    update (e) {
      this.$emit('update:visible', e)
    },
    onClickCancel () {
      this.$emit('cancel')
    },
    onClickConfirm () {
      this.$emit('confirm')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-dialog {
    border-radius: 8px;
  }
  .el-dialog__body {
    color: #686868;
    font-size: 14px;
    line-height: 22px;
  }
  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    &.cancel {
      border: 1px solid #e0e0e0;
      background-color: #fff;
      color: #686868;
    }
    &.confirm {
      border: 1px solid #2ABED1;
      background-color: #2ABED1;
      color: #fff;
      &:disabled{
        opacity: 0.5;
      }
    }
    &:not(:last-of-type) {
      margin-right: 48px;
    }
  }
}
.text-center {
  ::v-deep {
    .el-dialog__body {
      text-align: center;
    }
  }
}
</style>