popup组件（移动端vite5+vue3.4）

1.组件分析：

这是一个移动端常用的组件，一般是用户点击一个按钮，从屏幕底部弹出一个弹出层。下图展示uniapp的popup组件

组件只需要一个和父组件双向绑定的值，用于控制popup的显示和隐藏。popup组件有插槽供父组件提供自定义内容。

2.组件代码

<script setup>
import { ref } from 'vue'
const model = defineModel()
</script>

<template>
  <teleport to="body">
    <transition name="fade">
      <div
        v-if="model"
        class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"
        @click="model = false"></div>
    </transition>

    <div
      v-if="model"
      class="w-screen bg-white z-50 fixed bottom-0">
      <slot></slot>
      <!-- <p>这是一个弹窗的内容</p> -->
    </div>
  </teleport>
</template>

<style scoped>
/* fade动画 */
.fade-enter-active {
  transition: all 0.5s;
}
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

3.代码中有三个技术点：

• vue3.4的defineModel
• vue3的teleport（将dom传送到body下）
• 简单的vue动画

备注

组件代码比较简单