Heim >Web-Frontend >js-Tutorial >Vue-Bildvorschaukomponente (Code), basierend auf Photoswipe implementiert

Vue-Bildvorschaukomponente (Code), basierend auf Photoswipe implementiert

不言
不言Original
2018-09-15 16:06:124837Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Erstellung des Vue-Bildvorschau-Plugins (Code). Ich hoffe, dass er für Freunde hilfreich ist.

vue-image-swipe

Vue-Bildvorschaukomponente basierend auf Photoswipe

Installation

1 Der erste Schritt

npm instatll vue-image-swipe -D

2 Die zweiter Schritt

Einführung in die Vue-Eintragsdatei

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

verwendet

<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>

Methoden

macht nur eine Methode verfügbarthis.$imagePreview , und gebunden an den Prototyp von Vue
Verwenden Sie

this.$imagePreview(options = {})

Optionen haben drei Parameter

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

defaultOpt-Konfigurationselemente finden Sie unter Photoswipe-Konfigurationselemente,
Hinweis: Es gibt keine Garantie, dass alle Konfigurationselemente verfügbar sind

Listen Sie einige häufig verwendete Konfigurationen auf

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

Verwandte Empfehlungen:

HTML-Bilder auswählen und den Implementierungscode direkt in der Vorschau anzeigen

So verwenden Sie Vue2x, um das Bildvorschau-Plug-in zu implementieren

Das obige ist der detaillierte Inhalt vonVue-Bildvorschaukomponente (Code), basierend auf Photoswipe implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn