vuejs签名库_VueJS响应式和可自定义的图像和视频库

vuejs签名库

Vue画廊 (vue-gallery)

VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.

VueJS响应式和可自定义的图像和视频库，轮播和灯箱，已针对移动和桌面Web浏览器进行了优化。

View Demo 查看演示 View Demo 查看演示

安装 (Install)

CDN (CDN)

Recommended: https://unpkg.com/vue-gallery, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-gallery/

推荐： https : //unpkg.com/vue-gallery ，它将在发布到npm时立即反映最新版本。 您也可以在https://unpkg.com/vue-gallery/浏览npm软件包的源代码。

NPM (NPM)

npm install vue-gallery --save

纱 (Yarn)

yarn add vue-gallery

开发设置 (Development Setup)

# install dependencies
npm install

# build dist files
npm run build

用法 (Usage)

VueJS单个文件(ECMAScript 2015) (VueJS single file (ECMAScript 2015))

<template>
  <div>
    <gallery :images="images" :index="index" @close="index = null"></gallery>
    <div
      class="image"
      v-for="(image, imageIndex) in images"
      :key="imageIndex"
      @click="index = imageIndex"
      :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
    ></div>
  </div>
</template>

<script>
  import VueGallery from 'vue-gallery';
  
  export default {
    data: function () {
      return {
        images: [
          'https://dummyimage.com/800/ffffff/000000',
          'https://dummyimage.com/1600/ffffff/000000',
          'https://dummyimage.com/1280/000000/ffffff',
          'https://dummyimage.com/400/000000/ffffff',
        ],
        index: null
      };
    },

    components: {
      'gallery': VueGallery
    },
  }
</script> 

<style scoped>
  .image {
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #ebebeb;
    margin: 5px;
  }
</style>

浏览器(ES5) (Browser (ES5))

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/js/blueimp-helper.js"></script>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/js/blueimp-gallery.js"></script>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/js/blueimp-gallery-fullscreen.js"></script>
  <script type="text/javascript" src="vue-gallery.js"></script>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/css/blueimp-gallery.min.css">

<div id="app">
  <gallery :images="images" :index="index" @close="index = null"></gallery>
  <div
    class="image"
    v-for="image, imageIndex in images"
    @click="index = imageIndex"
    :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
  ></div>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: function () {
      return {
        images: [
          'https://dummyimage.com/800/ffffff/000000',
          'https://dummyimage.com/1600/ffffff/000000',
          'https://dummyimage.com/1280/000000/ffffff',
          'https://dummyimage.com/400/000000/ffffff'
        ],
        index: null
      };
    },

    components: {
      'gallery': VueGallery
    }
  });
</script>

道具 (Props)

Props	Type	Default	Description
images	Array	[]	Urls list
index	Number	null	Opened image index
options	Object		blueimp-gallery options

道具	类型	默认	描述
图片	数组	[]	网址清单
指数	数	空值	打开的图片索引
选项	目的		blueimp-画廊选项

大事记 (Events)

Name	Params	Description
onopen
onopened
onslide
onslideend
onslidecomplete
onclose
onclosed

名称	参数	描述
开
开启
滑行
幻灯片
完整的
关闭
开闭

翻译自: https://vuejsexamples.com/vuejs-responsive-and-customizable-image-and-video-gallery-2/

vuejs签名库