本篇文章给大家带来的内容是关于vue图片预览插件如何创建（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
vue-image-swipe基于photoswipe实现的vue图片预览组件
安装1 第一步
npm instatll vue-image-swipe -d
2 第二步
vue 入口文件引入
import vue from 'vue'import vueimageswipe from 'vue-image-swipe'import 'vue-image-swipe/dist/vue-image-swipe.css'vue.use(vueimageswipe)
使用<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只暴露了一个方法this.$imagepreview，并绑定到vue的原型上
使用
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: '<p class="pswp__error-msg">图片加载失败</p>',}
相关推荐：
html选择图片并直接预览实现代码
如何使用vue2x实现图片预览插件
以上就是基于photoswipe实现的vue图片预览组件（代码）的详细内容。