基于photoswipe实现的vue图片预览组件vue-image-swipe

安装

npm install vue-image-swipe -S

在main.js中引用

import Vue from 'vue'
import VueImageSwipe from 'vue-image-swipe'
import 'vue-image-swipe/dist/vue-image-swipe.css'
Vue.use(VueImageSwipe)

使用

<template><div><ul><li:key="index"@click="preview(index)"v-for="(img, index) in images"><img:src="img"alt=""/></li></ul></div>
</template><script>
export default {name: "vue-image-swipe",data() {return {images: ["https://placekitten.com/400/400","https://placekitten.com/600/400","https://placekitten.com/600/600","https://placekitten.com/800/600","https://placekitten.com/800/800",],};},created() {},methods: {preview(index) {this.$imagePreview({images: this.images,index: index,defaultOpt: {tapToClose: true, // 点击上层图层关闭预览fullscreenEl: false, // 关闭右上角的全屏图标closeEl: false // 关闭右上角的X图标}});},},
};
</script>

methods

只暴露了一个方法this.$imagePreview，并绑定到vue的原型上
使用

this.$imagePreview(options = {})

options有三个参数

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

defaultOpt 的配置项请参考photoswipe配置项， 注意：不能保证所有配置项都是可用的

列举一些常用的配置

defaultOpt: {tapToClose: true, // 点击上层图层关闭预览closeEl: false, // 关闭右上角的X图标fullscreenEl: true, // 打开右上角的全屏图标shareEl: false, // 关闭右上角的分享图标arrowEl: true, preloaderEl: true,loop: false,bgOpacity: 0.85,showHideOpacity: true,errorMsg: '<div class="pswp__error-msg">图片加载失败</div>',
}

基于photoswipe实现的vue图片预览组件vue-image-swipe相关推荐

基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
hevue-img-preview 简介完整版下载地址:基于 vue 编写的vue图片预览组件本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...
vue 封装图片预览组件
因项目需要,自己封装了个vue图片预览组件 <template><div class="imgs_previews animated" @mousewheel.p ...
pc 图片预览放大端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
VUE图片预览放大缩小插件viewer
VUE图片预览放大缩小插件viewer 一.安装依赖 npm install v-viewer --save 二.main.js内引用并注册调用 //main.js import Viewer fro ...
pc 图片预览放大端vue_移动端Vue.js的图片预览组件，支持放缩、滑动功能！
功能:图片预览组件,支持双手指放大/缩小,双击放大/缩小,单击消失隐藏. 注:touch事件请手机预览源码分享组件参数 data() { return { loading: 2, // 1成功 2 ...
基于React的图片预览组件
一. 需求:最近项目中遇到要进行图片预览的需求,在网上找了一大圈可用的图片预览组件,起初选择react-wx-images-viewer作为预览组件二次开发,但后来发现虽然这个组件在Git上113个s ...
react实现图片预览组件
功能主要包括:下载图片.等比缩放.旋转.全屏拖拽用法: import ImgPreview from '@/components/ImgPreview' {/* 图片预览组件 */} <Img ...
图片预览组件PhotoView
图片预览组件PhotoView PhotoView是一款图片预览组件,广泛应用于大图的查看.该组件支持图片手势缩放.旋转等功能.它可以很好的和ViewPager.Picasso等组件结合,实现各种复杂 ...
Angular 图片预览组件
写在前面环境 :Angular8 图片预览组件实现的功能包括:全屏查看:放大.缩小( 鼠标滚轮可放大.缩小图片):翻页( 键盘左右按键翻页):旋转:拖拽功能实现首先创建angular项目,在项目 ...

基于photoswipe实现的vue图片预览组件vue-image-swipe

基于photoswipe实现的vue图片预览组件vue-image-swipe相关推荐

最新文章

热门文章