vue3 实现图片预览组件
vue手动实现
大致思路及步骤
- 插入body，制作全局遮罩层、禁止背景滚动
-
- 创建一个组件插入body中，使用固定定位生成一个全局遮罩层，再把图片放进去
- 创建组件/components/PreviewImage/index.vue
- 搭建组件结构，传入url数组，以及打开的当前图片索引下标，以便进行翻页查看
- 如果遮罩层后面页面有滚动条时在组件打开时，需要禁止背景内容随鼠标滚轮滚动，每次打开关闭时给body动态增加样式 overflow: hidden属性即可
- 定义组件过渡动画
-
- 使用
transition组件，这样切换显示隐藏都会触发过渡效果，如果以class类名的形式定义的过渡动画，在使用指令时v-if或者v-show 隐藏关闭时不会触发结束的过渡效果
- 使用
- 结合
transition实现图片控制