EDFS-MCU/src/components/Edfs-dialog.vue

<template>
  <div class="base-dialog">
    <el-dialog
      :title="title"
      v-model="visible"
      :draggable="draggable"
      :overflow="overflow"
      :width="width"
      :close-on-click-modal="false"
      @close="onClose"
    >
      <slot></slot>
      <template #footer>
        <slot name="footer"></slot>
      </template>

      <template v-if="isShowFooter">
        <div class="dialog-footer">
          <edfs-button
            type="primary"
            @click="onSave"
            :loading="btnLoading"
            inner-text="确定"
          />
          <edfs-button v-if="useDelBtn" type="danger" @click="onDel" inner-text="删除" />
          <edfs-button @click="onClose" inner-text="关闭" />
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import edfsButton from './Edfs-button.vue'

interface Props {
  title: string
  isShow: boolean
  isShowFooter?: boolean
  draggable?: boolean
  overflow?: boolean
  width?: string
  btnLoading?: boolean
  useDelBtn?: boolean
}

const emits = defineEmits(['on-save', 'on-close', 'on-del'])

const visible = ref(false)

const props = withDefaults(defineProps<Props>(), {
  title: '提示',
  isShow: false,
  isShowFooter: true,
  draggable: true,
  overflow: true,
  btnLoading: false,
  useDelBtn: false,
})

watch(
  () => props.isShow,
  val => {
    visible.value = val
  }
)

function onSave() {
  emits('on-save')
}

function onClose() {
  emits('on-close')
}

function onDel() {
  emits('on-del')
}
</script>

<style lang="scss" scoped>
.base-dialog {
  :deep(.el-dialog__header) {
    display: flex;
    padding-bottom: 16px;
    padding-right: 20px;
  }
  :deep(.el-dialog__title) {
    font-size: 18px;
  }

  :deep(.el-dialog) {
    padding: 20px;
  }
  :deep(.el-dialog__footer) {
    padding: 0;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 4px;
    height: 60px;
    margin-top: 20px;
  }
}
</style>