vue-images | 一款基于vue.js的简单响应式lightbox组件

vue-images是一款基于vue.js的简单响应式lightbox组件。它可以轻松地帮助您在Vue.js应用程序中实现弹出式lightbox效果。

vue-images的特点包括：

• 支持移动端
• 支持使用缩略图作为导航
• 响应式设计

使用方法

安装

如果您想使用vue-images插件，首先您需要安装它，命令如下：

npm install vue-images --save
		

使用

// 在 ES6 模块中导入
import vueImages from 'vue-images'
// 或使用script标签引用
../node-modules/vue-images/dist/vue-images.js
		

然后可以在组件中使用

// Use module as component
new Vue({
  el: '#app',
  data () {
    return {
      images: [...],
      ...
    }
  },
  components: {
    vueImages: vueImages
  }
})
		

配置参数

vue-images插件的可用配置参数如下：

• images：图像数组，每个图像都是一个对象，包含下面的属性：imageUrl：图像地址；caption：图像的标题。
• modalclose：是否允许用户通过单击背景退出lightbox，默认值为true。
• keyinput：是否支持键盘的这些按键：esc，←，→。默认值为true。
• mousescroll：是否支持鼠标滚动，默认值为true。
• showclosebutton：是否显示关闭按钮x，默认值为true。
• showcaption：是否在图片底部显示图片的描述信息，默认值为true。
• imagecountseparator：自定义图像计数分隔符，默认值为'of'。
• showimagecount：是否显示图片的数量,例如："3 of 20"，默认值为true。
• showthumbnails：是否在底部显示lightbox的缩略图，默认值为true。

github网址：https://github.com/littlewin-wang/vue-images