基于 Vue 图片+视频预览灯箱组件Vue-ItBigger

今天给小伙伴们分享一个超棒的实用Vue图片预览组件VueItBigger。

vue-it-bigger 一款基于vue-image-lightbox的响应式vue.js灯箱组件。友好的缩略图，支持单张、多张及视频预览配置，另外还支持键盘左右和ESC按键。

特性

• 友好的淡入淡出视觉展示
• 窗口响应式
• 支持缩略图、标题栏及图像计数器
• 更简单的css

安装

$ npm i vue-it-bigger -S

使用

<template>
  <div>
    <LightBox 
      :media="media"
      :showThumbs="true"
      :nThumbs="10"
      :showCaption="true"
    >
    </LightBox>
  </div>
</template>

<script>
import LightBox from 'vue-it-bigger'

export default {
  components: {
    LightBox
  },
  data() {
    media: [
      { // image配置
        thumb: 'http://example.com/thumb.jpg',
        src: 'http://example.com/image.jpg',
        caption: 'Caption to display. HTML <b>enabled</b>',
      },
      { // video配置
        thumb: 'http://example.com/image-slider.jpg',
        sources: [
          {
            src: 'http://example.com/pic/mov_bbb.mp4',
            type: 'video/mp4'
          }
        ],
        type: 'video',
        caption: '<h4>Monsters Inc.</h4>',
        width: 800,
        height: 600,
        autoplay: true,
      }
    ]
  }
}
</script>

参数及方法配置

提供如下精美的演示demo

附上演示及仓库地址

# 演示地址
https://haiafara.github.io/vue-it-bigger/

# github地址
https://github.com/haiafara/vue-it-bigger

ok，今天就分享到这里。如果大家有其它Vue图片预览组件，欢迎一起交流讨论！