vue可滑动插件_一个Vue插件，可通过滑动功能显示图库

vue可滑动插件

Vue图片滑动图库 (Vue Picture Swipe Gallery)

Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe

由photowipe支持的Vue图片滑动图库(带有缩略图，延迟加载和滑动的图像的画廊)

This component is a simple wrapper for the awesome Photoswipe. It's a Vue plugin that displays a gallery of image with swipe function (and more). Includes lazy (smart) loading (mobile friendly) and thumbnails.

该组件是真棒Photoswipe的简单包装。 这是一个Vue插件，可显示具有滑动功能(及更多功能)的图像库。 包括延迟(智能)加载(适合移动设备)和缩略图。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install --save vue-picture-swipe

用法 (Usage)

You can use it as you want. Here are some examples if you want to use it inline, or in a .vue file component or even with Laravel.

您可以根据需要使用它。 如果您想内联使用它，也可以在.vue文件组件中甚至使用Laravel使用以下示例。

内联用法 (Inline usage)

You can using it inline:

您可以内联使用它：

<vue-picture-swipe :items="[
    {src: 'http://example.org/xl.jpg',thumbnail: 'http://example.org/sm1.jpg',w: 600,h: 400},
    {src: 'http://example.org/xxl.jpg',thumbnail: 'http://example.org/sm2.jpg',w: 1200,h: 900}
  ]"></vue-picture-swipe>

Just remember to register the component:

只要记住注册该组件即可：

import VuePictureSwipe from 'vue-picture-swipe';
Vue.component('vue-picture-swipe', VuePictureSwipe);

new Vue({
  el: '#app'
})

在其他组件中的用法 (Usage in another component)

Create a component Example.vue. Then paste this:

创建一个组件Example.vue 。 然后粘贴：

<template>
  <vue-picture-swipe :items="items"></vue-picture-swipe>
</template>
<script>
  import VuePictureSwipe from 'vue-picture-swipe';
  export default {
    data() {
      return {
        items: [{
          src: 'http://via.placeholder.com/600x400',
          thumbnail: 'http://via.placeholder.com/64x64',
          w: 600,
          h: 400
        },
        {
          src: 'http://via.placeholder.com/1200x900',
          thumbnail: 'http://via.placeholder.com/64x64',
          w: 1200,
          h: 900
        }
      ]};
    }
  }
</script>

Laravel的用法 (Usage with Laravel)

Edit resources/assets/js/app.js and add this just before the new Vue lines.

编辑resources/assets/js/app.js并将其添加到new Vue行之前。

import VuePictureSwipe from 'vue-picture-swipe';
Vue.component('vue-picture-swipe', VuePictureSwipe);

Then run your watcher:

然后运行您的观察者：

npm run watch

高级用法 (Advanced usage)

PhotoSwipe选项 (PhotoSwipe options)

Use options for Photoswipe options.

将options用于Photoswipe选项 。

<!-- Disable "share" buttons. -->
<vue-picture-swipe :options="{shareEl: false}"></vue-picture-swipe>

翻译自: https://vuejsexamples.com/a-vue-plugin-that-displays-a-gallery-of-image-with-swipe-function/

vue可滑动插件