Vue CoolLightBox

下载

V2简介!

漂亮的Vue.js灯箱组件,不受任何的依赖项,并支持缩放,滑动,字幕和视频。

提示: 循环仅在滑动效果时有效

入门

安装

通过 npm

npm install --save vue-cool-lightbox

通过 CDN

<script src="https://unpkg.com/vue-cool-lightbox"></script>

<link rel="stylesheet" media="all" href="https://unpkg.com/vue-cool-lightbox/dist/vue-cool-lightbox.min.css" />

基本用法

通过 npm

// 使用组件
import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
 
export default {
  components: {
    CoolLightBox,
  },
}

// 或者在全局注册
import Vue from 'Vue'
import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

Vue.use(CoolLightBox)

通过 CDN

<script>
// 全局注册
Vue.component('vue-cool-lightbox', window.CoolLightBox.default)
</script>

例子

基础

当向上或向下滑动灯箱将要关闭时,您可以滑动幻灯片。

<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 + ')' }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      items: [
        '/images/191010_nature.jpg',
        '/images/nature-quotes-1557340276.jpg',
      ],
      index: null
    };
  },
};
</script>

淡入淡出效果

<template>
  <div id="app">
    <CoolLightBox 
      :items="items" 
      :index="index"
      :effect="'fade'"
      @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 + ')' }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      items: [
        '/images/191010_nature.jpg',
        '/images/nature-quotes-1557340276.jpg',
      ],
      index: null
    };
  },
};
</script>

带字幕

<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: '在自然界,没有什么是完美的,一切都是完美的',
          description: "Photo by Lucas",
          src: '/images/191010_nature.jpg',
        },
        {
          title: '美丽的山景',
          description: "Photo by Facundo",
          src: '/images/nature-quotes-1557340276.jpg',
        },
      ],
      index: null
    };
  },
};
</script>

缩放示例

提示: 仅当图像大于屏幕的高度或宽度时,才激活缩放。目前,在移动设备上尺寸已禁用。

<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: '在自然界,没有什么是完美的,一切都是完美的',
          description: "Photo by Lucas",
          src: '/images/photo-1420593248178-d88870618ca0.jpg',
        },
        {
          title: '美丽的山景',
          description: "Photo by Facundo",
          src: '/images/Shaqi_jrvej.jpg',
        },
      ],
      index: null
    };
  },
};
</script>

全屏

<template>
  <div id="app">
    <CoolLightBox 
      :items="items" 
      :index="index"
      :fullScreen="true"
      @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 + ')' }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      items: [
        '/images/191010_nature.jpg',
        '/images/nature-quotes-1557340276.jpg',
      ],
      index: null
    };
  },
};
</script>

视频

<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.thumb + ')' }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      items: [
        {
          title: '在自然界,没有什么是完美的,一切都是完美的',
          description: "Photo by Lucas",
          thumb: '/images/191010_nature.jpg',
          src: 'https://www.youtube.com/watch?v=d0tU18Ybcvk',
        },
        {
          title: '美丽的山景',
          description: "Photo by Facundo",
          src: 'https://vimeo.com/43338103',
          thumb: '/images/nature-quotes-1557340276.jpg',
        },
        {
          title: '在自然界,没有什么是完美的,一切都是完美的',
          description: "Photo by Lucas",
          thumb: '/images/1-nature.jpg',
          src: '/video.mp4',
        },
      ],
      index: null
    };
  },
};
</script>

API

项目属性

名称 描述
src 图片/视频的网址
title 幻灯片标题
description 幻灯片说明
thumb 拇指块中使用的拇指URL

Props

名称 类型 默认值 描述
index Number 打开项目的索引
items Array 图像/视频阵列
loop Boolean true 启用项目循环
effect String swipe 滑动效果,可以滑动或淡入淡出
fullScreen Boolean false 允许用户进入全屏模式
slideshow Boolean true 启用lighbox幻灯片放映
slideshowColorBar String #fa4242 幻灯片进度条的颜色
slideshowDuration Number 3000 幻灯片放映正在运行时的幻灯片持续时间(以毫秒为单位)
srcName String src 用作图片/视频网址的props名称
srcThumb String thumb 用作图片/视频拇指的prop名称
overlayColor String rgba(30, 30, 30, .9) 叠加颜色
zIndex Number 9999 .cool-lightbox z-index
thumbsPosition String right 定义拇指位置,可以是右或下

事件

名称 属性 @ 描述
OnChange (indexItem) @on-change 灯箱更改项目索引时发出
OnOpen (indexItem) @on-open 灯箱打开时发出
Close (indexItem) @close 灯箱关闭时发出

Slots

名称 描述
icon-previous 上一个图标
icon-next 下一个图标
close 关闭图标
loading 载入动画