vue-image-swipe

基于photoswipe實現的vue圖片預覽組件

安裝

1 第一步

npm install 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: '<div class="pswp__error-msg">圖片加載失敗</div>', }

demo

demo

查看源碼

總結

以上是生活随笔為你收集整理的实现一个vue的图片预览插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。