【Vue3 插件篇】GSAP 动画库与 图片预览插件
GSAP 动画库
GSAP（ ）是一个专业的动画库，可以用它完成你想要的各种效果
官网地址：
参考文章一：
参考文章二：
数字化管理平台
Vue3+Vite++Pinia+Axios+
Vue权限系统案例
个人博客
安装
npm install gsap --save
在需要的位置引入
import {TweenMax} from 'gsap'
GSAP的四个动画库
示例
中文文档：%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/
演示地址：
参考文章：
.js是一款开源的图片预览插件，功能十分强大：
安装
因为项目上线后仍然需要使用 .js，所以安装生产依赖，即-S。注意是 v-，不是 。
npm install v-viewer -S
全局配置
.用于更改默认配置，比如我不想要显示工具栏和title，那么.中我就设置: false和title: false，那么预览时就不会显示工具栏了，其他属性也可以这样设置。如果没有设置，就是默认属性。
main.js 引入代码
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({// 需要配置的属性 注意属性并没有引号title: false,toolbar: false
})
组件内使用
效果
因为全局配置时，设置了配置: false, title: false。所以预览时并没有title和工具栏。
如果是动态获取的图片，那么就要注意异步问题了。有可能会出现图片无法预览，即点击无反应的现象。可以参考：Vue + + 翻页后图片无法预览 Vue父子组件异步通信问题
附：常用配置参数：
'inline': true, // 是否启用inline模式
'button': true, // 是否显示右上角关闭按钮
'navbar': true, // 是否显示缩略图底部导航栏
'title': true, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
'toolbar': true, // 是否显示工具栏
'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true
'fullscreen': true, // 播放时是否全屏，默认true
'loading': true, // 加载图片时是否显示loading图标，默认true
'loop': true, // 是否可以循环查看图片，默认true
'movable': true, // 是否可以拖得图片，默认true
'zoomable': true, // 是否可以缩放图片，默认true
'rotatable': true, // 是否可以旋转图片，默认true
'scalable': true, // 是否可以翻转图片，默认true
'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true
'transition': true, // 使用 CSS3 过度，默认true
'keyboard': true, // 是否支持键盘，默认true
'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1
'minZoomRatio': 0.01, // 最小缩放比例，默认0.01
'maxZoomRatio': 100, // 最大缩放比例，默认100
'url': 'data-source' // 设置大图片的 url
