Facebook风格照片网格和图像灯箱组件– v-lightbox

Facebook风格照片网格和图像灯箱组件– v-lightbox

插件名称:v-lightbox

发布时间:2020年8月26日

插件作者:Morioh-Lab

官网 演示 GitHub下载

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
}
相关插件