Vue image preview component (code) implemented based on photoswipe

The content of this article is about how to create the vue image preview plug-in (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

vue-image-swipe

Vue image preview component based on photoswipe

Installation

1 The first step

npm instatll vue-image-swipe -D

2 The second step

vue entry file introduction

import Vue from 'vue'
import VueImageSwipe from 'vue-image-swipe'
import 'vue-image-swipe/dist/vue-image-swipe.css'
Vue.use(VueImageSwipe)

Use

<template>
<div>
  hello world
  <div>
    <ul>
      <li
        :key="index"
        @click="preview(index)"
        v-for="(l, index) in images">
         <img :src="l" alt="">
      </li>
    </ul>
  </div>
</div>
</template>
<script>
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,
      })
    }
  }
}
</script>

methods

Only one method is exposedthis.$imagePreview , and bound to the prototype of vue
Use

this.$imagePreview(options = {})

options have three parameters

##defaultOpt{}Configuration items

Parameters	Default value	Description
images	Empty array	URL array of pictures
index	0	The index value of the preview image, the default is 0

For the configuration items of defaultOpt, please refer to photoswipe configuration items.

Note: There is no guarantee that all configuration items are available

List some commonly used configurations

defaultOpt: {
  fullscreenEl: true,
  shareEl: false,
  arrowEl: true,
  preloaderEl: true,
  loop: false,
  bgOpacity: 0.85,
  showHideOpacity: true,
  errorMsg: '<p class="pswp__error-msg">图片加载失败</p>',
}

Related recommendations:

HTML select pictures and directly preview the implementation code

How to use Vue2x to implement image preview plug-in

The above is the detailed content of Vue image preview component (code) implemented based on photoswipe. For more information, please follow other related articles on the PHP Chinese website!