vue3 数据大屏 项目开发中，需要弹窗组件，这里我们整理弹窗组件，并通过gsap补间动画给弹窗添加入场动画以及离场动画。

弹窗效果

展开动画：从中间缓慢向上下两边展开；
收缩动画：从上下两边向中间收缩隐藏。

效果截图

演示动画

组件代码

<template>
  <div>
    <div class="popWin" :style="{ zIndex: zIndex }" v-if="show">
      <div class="popWinBg" v-if="show"></div>
      <div class="popWinMain" ref="popWinMain" v-if="show">
        <div class="popWinMainInner" v-if="showInner">
          <div class="popClose" ref="popClose" v-if="showInner" @click="getHide"></div>
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

使用组件

<pop ref="pop" :append-to-body="true" :z-index="55555">

</pop>

更多数据可视化大屏弹窗

vue 酷炫可视化大屏弹窗

弹窗完整实例代码

当前完整演示实例代码下载

项目基于Vue3 vite js实现