포토와이프를 기반으로 구현된 Vue 이미지 미리보기 구성요소(코드)

이 글의 내용은 vue 이미지 미리보기 플러그인(코드)을 만드는 방법에 관한 내용입니다. 참고할만한 가치가 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

vue-image-swipe

Photoswipe를 기반으로 한 Vue 이미지 미리보기 구성 요소

Installation

1 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

A 방법만 this.$imagePreview는 노출되어 vue 프로토타입에 바인딩됩니다.
세 개의 매개변수가 있는

this.$imagePreview(options = {})

옵션을 사용하세요

parameters	기본값	description
images	빈 배열	URL 이미지 배열
index	0	미리보기 이미지의 인덱스 값, 기본값은 0
defaultOpt	{}	구성 항목

기본 Opt 구성 항목을 참조하세요.
참고: 모든 구성 항목을 사용할 수 있다는 보장은 없습니다

일반적으로 사용되는 일부 구성을 나열하세요

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!