vue-image-swipe

基于photoswipe实现的vue图片预览组件

安装

1 第一步



npm install vue-image-swipe -D

2 第二步

vue 入口文件引入



import Vue from 'vue'

import VueImageSwipe from 'vue-image-swipe'

import 'vue-image-swipe/dist/vue-image-swipe.css'

Vue.use(VueImageSwipe)

使用



&lt;template&gt;

&lt;div&gt;

  hello world

  &lt;div&gt;

    &lt;ul&gt;

      &lt;li

        :key="index"

        @click="preview(index)"

        v-for="(l, index) in images"&gt;

         &lt;img :src="l" alt=""&gt;

      &lt;/li&gt;

    &lt;/ul&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;/template&gt;

&lt;script&gt;

export default {

  name: 'app',

  data() {

    return {

      images: [

        'http://oayhezji6.bkt.clouddn.com/preview1.jpg',

        'http://oayhezji6.bkt.clouddn.com/preview2.jpg',

        'http://oayhezji6.bkt.clouddn.com/preview3.jpg',

        'http://oayhezji6.bkt.clouddn.com/preview9.jpg',

        'http://oayhezji6.bkt.clouddn.com/preview10.jpg',

        'http://oayhezji6.bkt.clouddn.com/preview6.jpg'

      ]

    }

  },

  created() {

  },

  methods: {

    preview(index) {

      this.$imagePreview({

        images: this.images,

        index: index,

      })

    }

  }

}

&lt;/script&gt;

methods

只暴露了一个方法this.$imagePreview，并绑定到vue的原型上
使用



this.$imagePreview(options = {})

options有三个参数

参数	默认值	说明
images	空数组	图片的url数组
index	0	预览图片的索引值, 默认是0
defaultOpt	{}	配置项

defaultOpt 的配置项请参考photoswipe配置项，
注意：不能保证所有配置项都是可用的

列举一些常用的配置



defaultOpt: {

  fullscreenEl: true,

  shareEl: false,

  arrowEl: true,

  preloaderEl: true,

  loop: false,

  bgOpacity: 0.85,

  showHideOpacity: true,

  errorMsg: '&lt;div class="pswp__error-msg"&gt;图片加载失败&lt;/div&gt;',

}

demo

查看源码

来源：https://segmentfault.com/a/1190000016409430

巴特西

实现一个vue的图片预览插件

vue-image-swipe

安装

使用

methods

demo

最新文章

热门文章