ホームページ > ウェブフロントエンド > jsチュートリアル > フォトスワイプに基づいて実装された Vue 画像プレビュー コンポーネント (コード)

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

不言
リリース: 2018-09-15 16:06:12
オリジナル
4864 人が閲覧しました

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

vue-image-swipe

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

インストール

1 最初のステップ

1

npm instatll vue-image-swipe -D

ログイン後にコピー

2 2 番目のステップ

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

1

2

3

4

import Vue from 'vue'

import VueImageSwipe from 'vue-image-swipe'

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

Vue.use(VueImageSwipe)

ログイン後にコピー

Use

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<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

1

this.$imagePreview(options = {})

ログイン後にコピー

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

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

#

1

2

3

4

5

6

7

8

9

10

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート