Cold_erp_web/src/components/dialog/Dialog.vue

<script setup lang="ts">
import { ref } from 'vue'
const dialogVisible = ref(false)
interface DialogProps {
  width?: string
  alignCenter: boolean
}
withDefaults(defineProps<DialogProps>(), {
  width: '50%',
  alignCenter: false
})

defineEmits<{ (e: 'on-close', value: boolean): void }>()

const DialogOpen = () => {
  dialogVisible.value = true
}
const DialogClose = () => {
  dialogVisible.value = false
}
// 导出方法
defineExpose({
  DialogOpen,
  DialogClose
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    @close="DialogClose"
    @closed="DialogClose"
    :align-center="alignCenter"
    :width="width"
    class="bottomD"
  >
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 弹框头部 -->
    <template #header>
      <slot name="header"></slot>
    </template>
    <!-- 弹框页脚 -->
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<style scoped>
:deep(.el-dialog) {
  animation: anim-open 1s linear !important;
}
.el-dialog__wrapper {
  transition-duration: 0.1s;
}
.el-dialog__wrapper.dialog-fade-enter-active,
.el-dialog__wrapper.dialog-fade-leave-active {
  animation: none !important;
}
.bottomD {
  animation: anim-open 1s linear !important;
}

@keyframes anim-open {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  25% {
    transform: translate3d(60%, 0, 0);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(15%, 0, 0);
    opacity: 0.9;
  }
  75% {
    transform: translate3d(5%, 0, 0);
    opacity: 0.95;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
</style>