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" :style="{height:this.height}">
        <bg></bg>
        <!--        <div class="popClose" ref="popClose" v-if="showInner" @click="getHide"></div>-->
        <div class="popWinMainInner" v-if="showInner">
          <div class="slot" v-if="showInner">
            <slot></slot>
          </div>
          <div class="footerLine">

          </div>
          <div class="footerBut">
            <div class="footerButItem" @click="getHide"><span>取消</span></div>
            <div class="footerButItem" @click="getHide"><span>确定</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

使用组件

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

</pop>

更多数据可视化大屏弹窗

vue 酷炫可视化大屏弹窗

更新日志

2023年12月21日

修改弹窗出现黑线情况，解决方案：div拼接在不同分辨率下出现黑线如何解决？

弹窗完整实例代码

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

项目基于Vue3 vite js实现