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

弹窗效果

弹窗动画：

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

效果截图

演示动画

组件代码

<template>
  <div>
    <div class="popWin" v-if="show">
      <div class="popWinBg" v-if="show"></div>
      <div class="popWinMain" ref="popWinMain" v-if="show">
        <bg></bg>
        <div class="popClose" ref="popClose" v-if="showInner" @click="getHide"></div>
        <div class="slot" v-if="showInner">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import gsap from 'gsap'
import bg from './bg.vue'
export default {
  data() {
    return {
      show: false,
      showInner: false
    }
  },
  components: {bg},
  computed: {},
  mounted() {
  },
  props: {
    title: {
      type: String,
      default() {
        return '标题';
      }
    }
  },
  methods: {
    getShow() {
      var that=this;
      that.show = true
      that.$nextTick(() => {
        gsap.to(this.$refs.popWinMain, {
          duration: 1, height: '92%', onComplete: () => {
            this.showInner = true
            this.$nextTick(() => {
              gsap.to(this.$refs.popClose, {
                duration: 1, transform: ' rotateX(180deg)', onComplete: () => {
                  this.showInner = true
                }
              })
            })
          }
        })
      })

    },
    getHide() {
      this.showInner = false
      this.$nextTick(() => {
        gsap.to(this.$refs.popWinMain, {
          duration: 1, height: '0%', onComplete: () => {
            this.show = false
          }
        })
      })
    }
  },
}
</script>

使用组件

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

</pop>

更新日志

2023年11月29日 v1.1

删除用不到的依赖

增加层级控制，默认最大值，避免层级太低被其他组件遮挡。

增加appendToBody，是否将组件插入到body中 默认true

2023年11月08日

删除多余用不到的依赖以及字体文件

将弹窗组件插入到body，避免项目引用时对其他组件或受其他组件的影响。

更多数据可视化大屏弹窗

vue 酷炫可视化大屏弹窗

弹窗完整实例代码

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

项目基于Vue3 vite js实现