Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-image-batch-preview with all npm packages installed. Try it out:

var vueImageBatchPreview = require("vue-image-batch-preview")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-image-batch-preview v1.0.0

A vue image previewer component

vue-image-preview

Environment

This plugin is run with Vue2.

Platform

Not only mobile but also web are work perfectly.

Usage

Import component in your project, then write another a little bit code like below the component will work.

In script

import VueImagePreview from "vue-image-preview";
export default {
  components:{ VueImagePreview },
  ......
  data() {
    return {
      options: {
        effect: "cube",
        cube: {
          shadow: true,
          slideShadows: true,
          shadowOffset: 20,
          shadowScale: 0.94
        }
      }
    };
  }
......
}

In template

<vue-image-preview :options="options">
  <ul>
    <li v-for="item in list" :key="item.id">
      <img :src="item.src" />
    </li>
  </ul>
</vue-image-preview>

Option

Options object is swiper options, for more infomation you can see swiper officail document: https://swiperjs.com/api/.

attributetypedefalut valuedescrition
optionsObject{}swiper options
attrAsignBooleanfalseasign img to preview, if asign is get true value, you need to give img tag a 'preview' attribute that you want to preview, then component will include img that just have 'preview' attribute
autoUpdateBooleantrueupdate swiper way (manual operation or auto)
counterBooleantrueshow counter or not

Notice: swiper thumbs attribute in optoin is not allow, because vue-image-preview component doesn't include thumbs elements.

If attrAsign attribute get true value, you have to asign 'preview' attribute to all images you want to preview

<vue-image-preview :attr-asign="true" :options="options">
  <ul>
    <img :src="avatar.png" />
    <li v-for="item in list" :key="item.id">
      <img preview :src="item.src" />
    </li>
  </ul>
</vue-image-preview>

In this example, first image will not be included in previewer, but images that with preview attribute are included in previewer, and this scenes is common.

If autoUpdate get false value, you need to call updateImage() method by youself in parent component, because image previewer won't call updateImage() method any longer, it is rarely needed unless you need to update images list at time, or you want to call this function after async request to update images list. But in generally, you are not necessary give component auto-update="false" and call updateImage() by youself.

A complate example:

<template>
  <vue-image-preview :attr-asign="true" :auto-update="false" ref="preview" :options="options">
    <ul>
      <li v-for="item in list" :key="item.id">
        <img preview :src="item.src" />
      </li>
    </ul>
  </vue-image-preview>
</template>
<script>
import VueImagePreview from "vue-image-preview";
export default {
  components: { VueImagePreview },
  name: "HelloWorld",
  data() {
    return {
      list: [{
         id: 1,
         src: "./images/1.jpg"
      }],
      options: {
        effect: "cube",
        cube: {
          shadow: true,
          slideShadows: true,
          shadowOffset: 20,
          shadowScale: 0.94
        }
      }
    };
  },
  mounted() {
    const _this = this
    setTimeout(() => {
      _this.list = [
        ..._this.list,
        ...[
          {
            id: 2,
            src: "./images/2.jpg"
          },
          { 
            id: 3, 
            src: "./images/3.jpg" }
        ]
      ];
      _this.$refs["preview"].updateImage()
    }, 2000);
  }
};
</script>

In this example we call updateImage() by ourself, after _this.list data change, and we also can let image preview component call updateImage() method itself by default.

Event

@open: when image previewer is open this event will be triggered

@close: when image previewer is close this event will be triggered

中文文档

http://yunkus.com/post/5dd3b4edaa3c5bc8

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free