vue实现图库页面
Vue 实现图库页面
数据准备与结构设计
使用数组存储图片信息，每张图片包含 id、src（路径）、title（标题）等字段。示例数据结构：
data() {
return {
images: [
{ id: 1, src: '/path/to/image1.jpg', title: '风景1' },
{ id: 2, src: '/path/to/image2.jpg', title: '风景2' }
]
}
}基础布局实现
通过 v-for 循环渲染图片列表，结合 CSS Grid 或 Flexbox 实现响应式网格布局。示例模板代码：
<div class="gallery">
<div v-for="image in images" :key="image.id" class="gallery-item">
<img :src="image.src" :alt="image.title">
<p>{{ image.title }}</p>
</div>
</div>对应样式建议：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.gallery-item img {
width: 100%;
height: auto;
border-radius: 8px;
}图片懒加载优化
使用 Intersection Observer 或 v-lazy 指令实现懒加载。安装 vue-lazyload 插件：
npm install vue-lazyload注册插件后替换 img 的 src 为 v-lazy：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
loading: '/placeholder.png'
})模板修改：
<img v-lazy="image.src" :alt="image.title">图片预览功能
点击图片时展示大图，可通过 v-show 控制模态框显示。示例实现：
data() {
return {
selectedImage: null
}
},
methods: {
showImage(image) {
this.selectedImage = image
}
}模态框模板：
<div v-if="selectedImage" class="modal" @click.self="selectedImage = null">
<div class="modal-content">
<img :src="selectedImage.src" :alt="selectedImage.title">
<button @click="selectedImage = null">关闭</button>
</div>
</div>分类筛选功能
添加分类筛选需扩展数据结构并实现过滤逻辑。示例分类筛选：
computed: {
filteredImages() {
return this.selectedCategory
? this.images.filter(img => img.category === this.selectedCategory)
: this.images
}
}模板中添加分类选择器：
<select v-model="selectedCategory">
<option value="">全部</option>
<option v-for="cat in categories" :value="cat">{{ cat }}</option>
</select>性能优化建议
- 使用
WebP格式图片减少体积 - 实现分页加载或无限滚动
- 对大量图片使用虚拟滚动（如
vue-virtual-scroller） - 添加加载状态和错误处理占位图
完整示例可参考 Vue 官方文档或开源图库组件如 vue-photo-preview、vue-lightbox 的实现方案。
