Vue图像/视频库灯箱组件（vue-cool-lightbox）

 website 下载

介绍

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

使用方法

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>

4. 组件默认配置项。

index: {
  required: true
},
effect: {
  type: String,
  default: 'swipe'
},
items: {
  type: Array,
  required: true,
},
loop: {
  type: Boolean,
  default: true,
},
slideshow: {
  type: Boolean,
  default: true,
},
slideshowColorBar: {
  type: String,
  default: '#fa4242',
},
slideshowDuration: {
  type: Number,
  default: 3000,
},

useZoomBar: {
  type: Boolean,
  default: false,
},
closeOnClickOutsideMobile: {
  type: Boolean,
  default: false,
},

srcName: {
  type: String,
  default: 'src',
},

srcThumb: {
  type: String,
  default: 'thumb',
},
srcMediaType: {
  type: String,
  default: 'mediaType',
},
overlayColor: {
  type: String,
  default: 'rgba(30, 30, 30, .9)'
},
zIndex: {
  type: Number,
  default: 9999,
},
gallery: {
  type: Boolean,
  default: true,
},
fullScreen: {
  type: Boolean,
  default: false,
},
thumbsPosition: {
  type: String,
  default: 'right',
},
youtubeCookies: {
  type: Boolean,
  default: true,
},
enableWheelEvent: {
  type: Boolean,
  default: false,
},
showCloseButton: {
  type: Boolean,
  default: true,
},

disableZoom: {
  type: Boolean,
  default: false,
},
dir: {
  type: String,
  default: 'ltr',
},
enableScrollLock: {
  type: Boolean,
  default: true,
},