v-lightbox是一个Vue.js组件,可以像在Facebook时间线上看到的那样,在紧凑的照片网格中显示图像。
点击/点击图片将在可导航的灯箱图库中显示所有图片。
# NPM
$ npm i @morioh/v-lightbox --save
1.将必要的资源导入您的应用程序。
import Vue from 'vue'
import Lightbox from '@morioh/v-lightbox'
// 风格
import '@morioh/v-lightbox/dist/lightbox.css';
2.将灯箱组件添加到模板。
<lightbox :items="images"></lightbox>
3.将图像列表插入照片网格。
export default {
data() {
return {
images: [
"1.jpg",
"2.jpg",
"3.jpg",
//更多图片
],
}
}
}
4.所有可用的 props 来自定义照片网格和灯箱。
items: {
type: Array,
default: () => { return [] }
},
css: {
type: String,
default: () => 'h-250 h-md-400 h-lg-600'
},
cells: {
type: Number,
default: () => 5
}