Vue Cool Lightbox
made with Vuejs

Vue Cool Lightbox是一个漂亮的灯箱组件，基于Vue.js，不受其他任何依赖，受Fancybox的启发

Vue Cool Lightbox支持缩放、字幕、拇指和视频。

安装

Npm

npm i vue-cool-lightbox

Yarn

yarn add vue-cool-lightbox

使用

引入并注册组件

import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

export default {
  components: {
    CoolLightBox,
  },
}

使用组件

<CoolLightBox 
  :items="items" 
  :index="index"
  loop
  @close="index = null">
</CoolLightBox>

数据：

{
  items: [
    {
      src: 'https://cosmos-images2.imgix.net/file/spina/photo/20565/
      191010_nature.jpg?ixlib=rails-2.1.4&auto=format&ch=Width%2CDPR&fit=max&w=835',
    },
    {
      src: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/
      images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*',
    },
  ],
  index: null
};

示例