vue3 实现图片预览组件

vue手动实现

大致思路及步骤

• 插入body，制作全局遮罩层、禁止背景滚动

• • 创建一个组件插入body中，使用固定定位生成一个全局遮罩层，再把图片放进去
  • 创建组件/components/PreviewImage/index.vue
  • 搭建组件结构，传入url数组，以及打开的当前图片索引下标，以便进行翻页查看
  • 如果遮罩层后面页面有滚动条时在组件打开时，需要禁止背景内容随鼠标滚轮滚动，每次打开关闭时给body动态增加样式 overflow: hidden属性即可

• 定义组件过渡动画

• • 使用 transition组件，这样切换显示隐藏都会触发过渡效果，如果以class类名的形式定义的过渡动画，在使用指令时v-if或者v-show 隐藏关闭时不会触发结束的过渡效果

• 结合 transition实现图片控制