フォトスワイプに基づいて実装された Vue 画像プレビュー コンポーネント (コード)

この記事の内容は、vue 画像プレビュー プラグイン (コード) の作成方法に関するものです。必要な方は参考にしていただければ幸いです。

vue-image-swipe

photoswipe に基づく Vue 画像プレビュー コンポーネント

インストール

1 最初のステップ

npm instatll vue-image-swipe -D

2 2 番目のステップ

vue エントリ ファイルの紹介

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

公開されるメソッドは 1 つだけですthis.$imagePreview 、 vue のプロトタイプにバインドされています
Use

this.$imagePreview(options = {})

options には 3 つのパラメータがあります

画像##画像の URL 配列#index0プレビュー画像のインデックス値、デフォルトは 0設定項目defaultOpt の設定項目については、photoswipe の設定項目を参照してください。注: すべての設定が保証されるわけではありません。項目が利用可能です

Parameters	Default value	説明
##空の配列
	##defaultOpt	{}

一般的に使用される構成をいくつかリストします

#

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

関連する推奨事項:#HTML 画像を選択し、実装コードを直接プレビューします

Vue2x を使用して画像プレビュー プラグインを実装する方法

以上がフォトスワイプに基づいて実装された Vue 画像プレビュー コンポーネント (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。