vue3 数据大屏 项目开发中,需要弹窗组件,这里我们整理弹窗组件,并通过gsap补间动画给弹窗添加入场动画以及离场动画。
弹窗效果
展开动画:从中间缓慢向左右两边展开;
收缩动画:从左右两边向中间收缩隐藏。
效果截图
演示动画
组件代码
<template>
...
yekong
1年前 (2023-12-21)
喜欢
vue3 数据可视化大屏项目开发中,会需要一些弹窗效果,弹窗组件有各种不同样式的,为了能够在不同风格的数据大屏中使用弹窗组件,这里也整理了自己做过的数据大屏项目中不同风格的弹窗组件。
vue3 数据可视化大屏弹窗组件 - 大屏驾驶舱
vue3 数据可视化大屏弹窗组件 - 大屏驾驶...
yekong
1年前 (2023-12-19)
喜欢
vue3 数据大屏 项目开发中,需要弹窗组件,这里我们整理弹窗组件,并通过gsap补间动画给弹窗添加入场动画以及离场动画。
效果截图
演示动画
组件代码
<template>
<div>
<div @click="show=...
yekong
1年前 (2023-12-05)
喜欢
vue3 数据大屏 项目开发中,需要弹窗组件,这里我们整理弹窗组件,并通过gsap补间动画给弹窗添加入场动画以及离场动画。
弹窗效果
展开动画:从中间缓慢向上下两边展开;
收缩动画:从上下两边向中间收缩隐藏。
效果截图
演示动画
组件代码
<template>
...
yekong
1年前 (2023-11-29)
喜欢
vue3 数据大屏 项目开发中,需要弹窗组件,这里我们整理弹窗组件,并通过gsap补间动画给弹窗添加入场动画以及离场动画。
弹窗效果
弹窗动画:
展开动画:从中间缓慢向上下两边展开;
收缩动画:从上下两边向中间收缩隐藏。
效果截图
演示动画
组件代码
<template...
yekong
1年前 (2023-11-29)
喜欢
vue3 数据可视化大屏弹窗组件 - 数据一张图
vue3 数据大屏 项目开发中,需要弹窗组件,这里我们整理弹窗组件,并通过gsap补间动画给弹窗添加入场动画以及离场动画。
效果截图
演示动画
组件代码
<div class="popWin" v-i...
yekong
1年前 (2023-10-15)
喜欢
vue3 数据大屏 项目开发中,需要弹窗组件,这里我们整理弹窗组件,并通过gsap补间动画给弹窗添加入场动画以及离场动画。
弹窗效果
弹窗动画
展开动画:从中间缓慢向上下两边展开;
收缩动画:从上下两边向中间收缩隐藏。
效果截图
演示动画
使用组件
组件可传值宽高控制大小。标...
yekong
2年前 (2023-06-20)
喜欢