当前位置： 首页 > article >正文

vue3 实现图片预览组件

article 2024/9/26 0:39:35

vue手动实现

大致思路及步骤

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

http://www.kler.cn/news/319618.html

相关文章：

  • [ABC330E] Mex and Update
  • java-重启异常断掉的线程和监控线程状态
  • Android——Application
  • 网红挣钱太容易了
  • 路由器全局配置DHCP实验简述
  • MySQL篇（视图）（持续更新迭代）
  • CANopen通讯协议笔记
  • 制作一个能对话能跳舞的otto机器人
  • SentencePiece进行文本分类
  • 大数据-147 Apache Kudu 常用 Java API 增删改查
  • 二进制位运算题
  • python库 | lxml库
  • Python_yield
  • 【项目实战】如何在项目中自定义错误码
  • VisualStudio编译时出现无法启动mt.exe
  • C++之spring
  • Codeforces Round 973 (Div. 2) C. Password Cracking
  • 抓取股票数据
  • 28岁打算转行靠谱么，这个年龄转行，有什么适合的行业么？
  • opencv滤波算法总结
  • Linux挂载命令
  • Docker 的安装部署与基本使用
  • Apache CVE-2021-41773 漏洞攻略
  • What is the new in C#11?
  • 验收测试：从需求到交付的全程把控！
  • BERT训练环节（代码实现）
  • 通过docker启动ElasticSearch后为ElasticSearch设置用户和密码
  • 分享课程：VUE数据可视化教程
  • vant_UI的选择时间小组件封装
  • excel VBA进行间比法设计