vue3 数据可视化大屏弹窗组件 - 数据一张图

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

效果截图

演示动画

组件代码

<div class="popWin" v-if="show">
    <div class="popWinBg" v-if="show"></div>
    <div class="popWinMain" ref="popWinMain" :style="{ height: popHeight }" v-if="show">
      <div class="itemBody">
        <!--    顶部线条-->
        <div class="topLine">
          <div class="topLineLeft">
            <div class="dot wow fadeInRight" :data-wow-delay="1+'s'"></div>
          </div>
          <div class="topLineRight">
            <div class="dot3 wow fadeInLeft" :data-wow-delay="1.4+'s'"></div>
            <div class="dot2 wow fadeInLeft" :data-wow-delay="1.2+'s'"></div>
            <div class="dot1 wow fadeInLeft" :data-wow-delay="1+'s'"></div>
          </div>
        </div>
        <div class="itemBody2" ref="inner" v-if="show">
          <div class="pageTitle" ref="pageTitle">
            <div class="pageTitlel" ref="pageTitlel">
              <p class="text" v-for="(char, index) in titleArray" :style="{ '--delay': index * 0.1 +0.8+ 's' }">{{
                  char
                }}</p>
            </div>
            <div @click="getHide" class="popClose"></div>
          </div>
          <div class="itemBodyInner">
            <div class="dot_bottom_left wow fadeInLeft" data-wow-delay="0.5s" ref="dot_bottom_left"></div>
            <div class="dot_bottom_right wow fadeInRight" data-wow-delay="0.5s" ref="dot_bottom_right"></div>
            <slot v-if="showInner"></slot>
          </div>
        </div>
        <!--    向下展开的背景-->
        <div class="bg" ref="bg" v-if="!show"></div>
      </div>
    </div>
  </div>

更多数据可视化大屏弹窗

vue3 酷炫可视化大屏弹窗

弹窗完整实例代码

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

项目基于Vue3 vite js实现