@wozien/vue-image-preview

基于 vue.js 实现的网页图片预览组件，支持拖拽，滚动缩放

开始使用

下载

npm install @wozien/vue-image-preview

引入组件

<template>
  <div id="#app">
    <v-image-preview
      ref="preview"
      :images="images"
      :start-index="index"
      :can-wheel="canWheel"
    ></v-image-preview>
  </div>
</template>

<script>
  import VImagePreview from '@wozien/vue-image-preview';

  export default {
    name: 'app',

    data() {
      return {
        images: ['.../a.jpg', '.../b.jpg'],
        index: 0,
        canWheel: false
      };
    },

    methods: {
      show() {
        this.$refs.preview.show();
      }
    }
  };
</script>

说明

属性

images: Array<string>

图片url数组

start-index: Number

开始预览的图片索引，默认为0

can-download: Boolean

是否可下载，默认为 false； 注意： 下载图片目前只使用同源情况，否则为新窗口打开原图

can-wheel: Boolean

是否支持鼠标滑轮缩放，默认为true

方法

show

显示图片预览界面

hide

隐藏图片预览界面

next

跳转下一张

prev

跳转上一张