vue画廊组件_VueJS的响应式画廊组件

vue画廊组件

Vue画廊幻灯片放映 (vue-gallery-slideshow)

Responsive image gallery for VueJS.

VueJS的自适应图像库。

View demo 查看演示 Download Source 下载源

安装 (Installation)

NPM (NPM)

npm install vue-gallery-slideshow --save

用法 (Usage)

HTML (HTML)

<div id="app">
  <img class="image" v-for="(image, i) in images" :src="image" @click="onClick(i)">
  <vue-gallery-slideshow :images="images" :index="index" @close="index = null"></vue-gallery-slideshow>
</div>

JavaScript (JavaScript)

import VueGallerySlideshow from 'vue-gallery-slideshow'


const app = new Vue({
  el: '#app',
  components: {
    VueGallerySlideshow
  },
  methods: {
    onClick(i) {
      this.index = i;
    }
  },
  data: {
    images: [
      'https://placekitten.com/801/800',
      'https://placekitten.com/802/800',
      'https://placekitten.com/803/800',
      'https://placekitten.com/804/800',
      'https://placekitten.com/805/800',
      'https://placekitten.com/806/800',
      'https://placekitten.com/807/800',
      'https://placekitten.com/808/800',
      'https://placekitten.com/809/800',
      'https://placekitten.com/810/800'
    ],
    index: 0
  }
})

翻译自: https://vuejsexamples.com/responsive-gallery-component-for-vuejs/

vue画廊组件