手写 el-dialog 弹窗效果

组件部分, 内容为空, 自己diy就行了, html 你难道不会? slot 插槽你难道不会?

<template>
  <transition name="dialog-fade">
    <div v-if="modelValue" class="m-overly" @click="hideDialog">
      <div class="m-dialog-container" @click.stop></div>
    </div>
  </transition>
</template>

<script setup>
import { watch } from "vue";

const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);

function hideDialog() {
  emit("update:modelValue", false);
}

watch(
  () => props.modelValue,
  () => {
    console.log("变化了");
  }
);
</script>

<style lang="scss" scoped>
.m-overly {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: -20px;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .m-dialog-container {
    width: 800px;
    height: 600px;
    border-radius: 20px;
    background: #fff;
  }
}

// 下面四个类是直接从element-plus搬过来的, 动画自己diy就行
.dialog-fade-enter-active {
  animation: dialog-fade-in 0.3s;
}

.dialog-fade-leave-active {
  animation: dialog-fade-out 0.3s;
}

@keyframes dialog-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
</style>

直接在页面上调用就行

<template>
  <m-dialog v-model="showDialog"></m-dialog>

  <button @click="changeShow">切换显示隐藏</button>
</template>

<script setup>
import MDialog from "@/components/Dialog/Dialog.vue";
import { ref } from "vue";

const showDialog = ref(false);

function changeShow() {
  showDialog.value = !showDialog.value;

  console.log("执行了", showDialog.value);
}
</script>

<style lang="scss" scoped></style>