vue3对话框组件，知识点：父子组件传值、slot插槽、Teleport、Transition、defineProps、defineEmits

Dialog.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import './index.css'

defineProps(['visible', 'title'])
const emit = defineEmits(['close'])

const handleClose = () => {
  emit('close')
}

onMounted(() => {})
</script>

<template>
  <Teleport to="body">
    <Transition name="m-dialog">
      <div :class="[`m-dialog ${visible ? 'active' : ''}`]" v-show="visible">
        <div class="m-dialog-header">
          <div class="m-dialog-header-info">{{ title }}</div>
          <div class="m-dialog-header-close" @click="() => handleClose()">
            关闭
          </div>
        </div>
        <div class="m-dialog-main">
          <slot></slot>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

index.css:

.m-dialog{display: flex; flex-direction: column; position: fixed;top: 50%;left: 50%;width: 300px;height: 250px;transform: translate(-50%, -50%); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);}
.m-dialog-header{display: flex;}
.m-dialog-header-info{flex: 1;}
.m-dialog-header-close{width: 50px;text-align: center;cursor: pointer;}
.m-dialog-header-close:hover{color: red;}
.m-dialog-main{flex: 1px}
.m-dialog-enter-active {transition: all 0.5s ease-out;}
.m-dialog-enter-from {opacity: 0;margin: -50px 0 0 0;}

me/Index.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import Dialog from '../../components/dialog/Dialog.vue';

const router = useRouter()
const visible = ref(false)

const handleJump = (path: any) => {
  router.push(path)
}

const handleOpenDialog = () => {
  visible.value = true
}

const handleCloseDialog = () => {
  visible.value = false
}

onMounted(() => {})
</script>

<template>
  <div>
    me
    <button @click="() => handleJump('/home')">home</button>
    <button @click="() => handleOpenDialog()">弹框</button>
    <Dialog :visible="visible" title="标题" @close="() => handleCloseDialog()">
      <div>hello world</div>
    </Dialog>
  </div>
</template>

参考链接

https://cn.vuejs.org/guide/built-ins/teleport.html

人工智能学习网站

https://chat.xutongbao.top