图像/视频库灯箱组件– vue-cool-lightbox

图像/视频库灯箱组件– vue-cool-lightbox
插件名称 vue-cool-lightbox
版本号 v2.7.0
发布时间 2020年4月16日
插件作者 lucaspulliese

vue-cool-lightbox是一个非常漂亮的图像和视频库灯箱组件,具有标题和图像缩放支持。

变更日志:

2021年2月6日

  • 修复了“底部”画廊的错误x位置

v2.7.0(2020年12月20日)

  • 具有加密网址的固定视频

v2.6.9(11/23/2020)

  • 禁用缩放时删除比例

v2.6.8(11/08/2020)

  • 修复了beforeDestroy挂钩上的enableBodyScroll

v2.6.7(2020年10月28日)

  • 在图片上添加了alt

v2.6.5(10/27/2020)

  • 更换幻灯片时停止播放视频

v2.6.4(10/15/2020)

  • 在beforeDestroy钩子上添加以删除bodyScrollLock

v2.6.3(10/05/2020)

  • 修复同一页面上的多个灯箱

v2.6.2(09/29/2020)

  • 修复了移动设备上的removeCompensateForScrollbar问题

v2.6.1(09/28/2020)

  • 添加补偿滚动条类

v2.6.0(09/22/2020)

  • 添加了bodyScrollLock

2020/09/14

  • feat:添加prop以启用页面滚动

v2.5.0(2020-08-25)

  • 添加了自动播放和目录道具

v2.4.3(2020-08-19)

  • 增加了机身滚动锁

v2.4.2(2020-08-15)

  • 固定的Google存储和其他云提供商

v2.4.1(2020-06-17)

  • 添加了disableZoom属性

v2.4.0(2020-06-15)

  • 添加更多props

安装和下载:

# NPM
$ npm install vue-cool-lightbox --save

使用:

1.安装并导入vue-cool-lightbox。

import CoolLightBox from 'vue-cool-lightbox'

2.注册组件。

export default {
  components: {
    CoolLightBox,
  },
}

3.将组件插入模板。

<template>
  <div id="app">
    <CoolLightBox 
      :items="items" 
      :index="index"
      @close="index = null">
    </CoolLightBox>
    <div class="images-wrapper">
      <div
        class="image"
        v-for="(image, imageIndex) in items"
        :key="imageIndex"
        @click="index = imageIndex"
        :style="{ backgroundImage: 'url(' + image.src + ')' }"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      items: [
        {
          title: 'Image 1',
          description: "Description 1",
          src: '1.jpg',
        },
        {
          title: 'a beautiful mountain view',
          description: "Description 2",
          src: '2.jpg',
        },
        {
          title: 'Youtube Video',
          description: "Youtube Video",
          thumb: 'thumb.jpg',
          src: 'https://www.youtube.com/watch?v=d0tU18Ybcvk',
        }
      ],
      index: null
    };
  },
};
</script>