web/apps/bigmember_pc/src/components/dialog/Dialog.vue

<template>
  <el-dialog
    class="custom-dialog"
    :custom-class="customClass"
    v-bind="$props"
    :show-close="showClose"
    :visible="visible"
    :before-close="beforeClose"
    @update:visible="update"
    v-component-change-mount="{ selector: comMount }"
    @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 class="action-button cancel" @click="onClickCancel">
          取消
        </button>
        <button
          class="action-button confirm"
          :disabled="disabled"
          @click="onClickConfirm"
        >
          确定
        </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,
    beforeClose: Function,
    comMount: {
      type: String,
      default: ''
    },
    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: ''
    },
    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;
  }
  .el-dialog__body,
  .el-dialog__footer {
    padding-left: 32px;
    padding-right: 32px;
  }
  .el-dialog__footer {
    padding-top: 6px;
  }
  .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;
    &.cancel {
      border: 1px solid #e0e0e0;
      background-color: #fff;
      color: #686868;
    }
    &.confirm {
      border: 1px solid $color_main;
      background-color: $color_main;
      color: #fff;
      &:disabled {
        opacity: 0.5;
      }
    }
    &:not(:last-of-type) {
      margin-right: 48px;
    }
  }
}
.text-center {
  ::v-deep {
    .el-dialog__body {
      text-align: center;
    }
  }
}
</style>