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 |