van-preview

a vue plugin of the image preview

Usage no npm install needed!

<script type="module">
  import vanPreview from 'https://cdn.skypack.dev/van-preview';
</script>

README

van-preview

一个图片语言的 Vue 插件。

Install

yarn add van-preview

Use

import Vue from 'vue'
import VanPreview from 'van-preview'

Vue.use(VanPreview)

Methods

this.$imagePreview(options = {})

options有三个参数

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

defaultOpt 的配置项请参考photoswipe配置项

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