/vue-image-gallery

A picture gallery plugin——移动端组件

Primary LanguageVue

vue-image-gallery

A picture gallery plugin 一个图片画廊组件

demo演示

二维码

安装

npm install vue-image-gallery --save

使用

// ES6
import vueImageGallery from 'vue-image-gallery.js'

Vue.use(vueImageGallery)

// 或者直接使用script导入
<script src="./node_modules/vue/dist/vue-image-gallery.js"></script>

// 作为组件的方式使用
<vue-image-gallery></vue-image-gallery>

配置

   <vue-image-gallery :banner="banner" :distance_min="distanceMin" :icon="icon"></vue-image-gallery>
data () {
      return {
        banner:[
                  {url:'https://unsplash.it/458/354?image=0',content:'这是一个张图片'},
                  {url:'https://unsplash.it/458/354?image=1',content:'这是二个张图片'},
                  {url:'https://unsplash.it/458/354?image=2',content:'这是三个张图片'},
                  {url:'https://unsplash.it/458/354?image=3',content:'这是四个张图片'},
                  {url:'https://unsplash.it/458/354?image=4',content:'这是五个张图片'},
              ],
        distanceMin:10,
        icon:'xxxx.png'
      }
    }

Props

name Description type default
banner 图片集合 Array [ {url:'图片地址', content:'图片相关介绍'} ]
distanceMin 最小滚动距离 Number 30
icon 下拉图标 String