使用 Vue 3 生成一个图片画廊,支持查看大图和切换图片
Vue 3 作为一个现代化的前端框架,通过其新的特性与 API 提供了更轻松的开发体验。在本篇博文中,我们将创建一个简单但功能强大的图片画廊,用户不仅可以查看缩略图,还可以点击查看大图,并在大图之间进行切换。我们将使用 Vue 3 的 setup
函数,使得我们的组件更加简洁和易于理解。
项目结构
首先,我们需要一个基本的项目结构。我们将创建一个名为 ImageGallery.vue
的组件,并在其中实现我们的逻辑。
目录结构
示例代码
以下是 ImageGallery.vue
组件的完整代码:
Modal 组件
为了实现大图查看的功能,我们需要一个 Modal
组件,用于展示大图。以下是 Modal.vue
的简单实现:
代码讲解
- 数据源:
images
数组存储了每个图片的缩略图与全图的 URL 地址,增加图片只需在该数组中添加新对象。 - 模态框管理:使用
isModalOpen
变量来管理模态框的显示与隐藏,使用currentImageIndex
来跟踪当前查看的图片索引。 - 打开模态框:
openModal
方法接收索引参数,更新当前图片索引并打开模态框。 - 关闭模态框:
closeModal
方法用于关闭模态框。 - 切换图片:
prevImage
和nextImage
方法用于前后切换大图,利用模态框索引的循环逻辑实现。
小结
通过以上步骤,我们成功地用 Vue 3 创建了一个简单的图片画廊。当用户点击缩略图时,模态框会展现大图,用户可以通过按钮切换不同的图片,体验直观且流畅的浏览效果。
通过灵活运用 Vue 3 的新特性和组件化的设计理念,我们不仅能够提高开发效率,还能创建出高可维护性和可复用性的组件。
最后问候亲爱的朋友们,并诚挚地邀请你们阅读我的全新著作。 书籍简介