【VUE】图片预览放大缩小插件(推荐阅读)
From: https://www.jianshu.com/p/e3350aa1b0d0
在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到三个插件,具体的优劣势的看自己的使用吧,我目前只是在电脑查看效果,分别是viewerjs插件、基于photoswipe的vue-photo-preview插件以及vue-picture-preview插件
第一种:viewerjs使用介绍
viewerjs插件截图
1、先安装依赖
npm install v-viewer --save
2、main.js内引用并注册调用
//main.js
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'Vue.use(Viewer);
Viewer.setDefaults({Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});
3、代码中使用xxx.vue
<template><div class="content"><h1>Viewer图片预览插件</h1><viewer :images="imgs"><img v-for="src in imgs" :src="src.url" :key="src.title"></viewer></div>
</template>
<script>
export default {data () {return {imgs: [{url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',title: '图片1'},{url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',title: '图片2'}]}},
}
</script>
viewerjs使用配置参数
第二种:vue-photo-preview使用介绍
vue-photo-preview插件截图
1、先安装依赖
npm install vue-photo-preview --save
2、main.js内引用并注册调用
//main.js
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
3、代码中使用xxx.vue
<template><div class="content"><section><h1>preview图片预览插件</h1><img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title"></section></div>
</template>
<script>
export default {data () {return {imgs: [{url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',title: '图片1',preview: '1'},{url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',title: '图片2',preview: '1'}]}},
}
</script>
option配置请查看 http://photoswipe.com/documentation/options.html
备注
preview是用来唤起看大图功能的,带有这个参数的img才能关联到插件,否则点击无效,preview的值是用来分组,比如某个模块是一组相册,那么这一组相册的img,使用同一个值比如 preview="0",那么看大图的时候就可以左右切换这一组图片的其他图了(没有关联的图之间,记得设置不同的preview值!)
src是图片地址,如果你的图片具备缩略图,则这里放缩略图,原图地址用large参数引入。
如果预览图片的时候需要一些文字说明,可以给img再加上 preview-text 参数,对应的值,就是这张图片的说明文本。
也可以配置参数使用
let options = {
fullscreenEl: false, //控制是否显示右上角全屏按钮
closeEl: false, //控制是否显示右上角关闭按钮
tapToClose: true, //点击滑动区域应关闭图库
shareEl: false, //控制是否显示分享按钮
zoomEl: false, //控制是否显示放大缩小按钮
counterEl: true, //控制是否显示左上角图片数量按钮
tapToToggleControls: true, //点击应切换控件的可见性
clickToCloseNonZoomable: true, //点击图片应关闭图库,仅当图像小于视口的大小时
indexIndicatorSep: ' / ',//图片数量的分隔符,
arrowEl: false, //控制如图的左右箭头(pc浏览器模拟手机时)
//clickToCloseNonZoomable: true //点击图片应关闭图库,仅当图像小于视口的大小时
}
Vue.use(preview, options)
第三种:vue-picture-preview使用介绍
vue-picture-preview插件截图
1、先安装依赖
npm install vue-picture-preview --save
2、main.js内引用并注册调用
//main.js
iimport vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)
3、在根组件添加 lg-preview 组件的位置
<!-- APP.vue -->
<div id="app"><router-view></router-view><lg-preview></lg-preview>
</div>
4、代码中使用xxx.vue
<template><div class="content"><h1>vuePicturePreview图片预览插件</h1><img v-for="(img,index) in imgs"v-preview="img.url":src="img.url":alt="img.title":key="index"preview-title-enable="true"preview-nav-enable="true"></div>
</template>
<script>
export default {data () {return {imgs: [{url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',title: '图片1'},{url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',title: '图片2'}]}},
}
</script>
总结
这三个插件介绍完了,除了第三种vue-picture-preview插件只有预览和切换上下张功能,另外两种都有放大和缩小(包括手势)以及其他功能。还是蛮好上手的插件
【VUE】图片预览放大缩小插件(推荐阅读)相关推荐
- VUE图片预览放大缩小插件viewer
VUE图片预览放大缩小插件viewer 一.安装依赖 npm install v-viewer --save 二.main.js内引用并注册调用 //main.js import Viewer fro ...
- pc 图片预览放大 端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
- 基于 vue 编写的vue图片预览组件,支持单图和多图预览,仅传入一个图片地址,即可实现图片预览效果,可自定义背景、按钮颜色等
hevue-img-preview 简介 完整版下载地址:基于 vue 编写的vue图片预览组件 本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...
- pc 图片预览放大 端vue_移动端Vue.js的图片预览组件,支持放缩、滑动功能!
功能:图片预览组件,支持双手指放大/缩小,双击放大/缩小,单击消失隐藏. 注:touch事件请手机预览 源码分享 组件参数 data() { return { loading: 2, // 1成功 2 ...
- vue中实现图片预览放大,缩小,旋转等功能, 使用viewerjs
前言: 之前使用过v-viewer实现图片查看的功能,但是不知道今年怎么回事,node线上的包下载下来不能用了,实现不了效果,又找到了一另一个好用的插件,那就是viewjs. 实现效果: 实现步骤: ...
- vue图片预览插件,支持鼠标缩放:useful-photo-preview
文章目录 前言 介绍 如何使用 安装 使用 功能 预览 API 前言 我现在在做的vue项目使用的组件库是Ant Design的vue版本,里面有个图片组件,但是用起来不顺心.在bing找了一些,要么 ...
- pc 图片预览放大 端vue_企业为什么需要建设PC+手机微信三合一全网营销的网站呢...
随着信息时代的发展,手机一步步的进入了我们的生活,渐渐的有很多东西都在从pc端过渡到手机端,我们在网购的时候会发现一系列的活动,比如说下载手机客户端就能免减多少钱或者抽奖这样的活动,这样在一定的程度上 ...
- flutter图片预览_flutter - 图片预览放大滑动(photo_view)
使用flutter 插件photo_view 官方使用方法 pubspec.yaml dependencies: photo_view: ^0.4.2 $ flutter pub get 2.demo ...
- 基于photoswipe实现的vue图片预览组件vue-image-swipe
安装 npm install vue-image-swipe -S 在main.js中引用 import Vue from 'vue' import VueImageSwipe from 'vue-i ...
最新文章
- Android : 反射机制获取或设置系统属性(SystemProperties)
- Git 基本工作流程
- ArcGIS在线资源集
- 桌面计算机密码应由哪项组成,计算机应用能力考试模拟试题
- 在本地计算机无法启动windows audio,win10系统无法启动windowsaudio服务的操作步骤
- 在Spring-boot中,为@Value注解添加从数据库读取properties支持
- 两台电脑间大量数据拷贝的快捷方法
- 利用Numpy提取+处理数据
- 基于Spring Security角色的访问授权示例
- linux卸载HBA卡驱动
- 离线网页 HTML+CSS+DIV
- 泰拉瑞亚手机版html,泰拉瑞亚1.2
- [渝粤教育] 徐州工业职业技术学院 橡胶原材料 参考 资料
- iSCSI服务部署网络存储---共享网络存储设备
- 基于HBase的大数据存储在京东的应用场景
- CSS面试须知--选择器
- HFDS 内部工作机制
- 【PHP MySQL】数据库专题 第九课 自连接
- 应收应付重分类的配置和操作详解
- ONES Talk | 我们为什么选择最难走的软件之路
热门文章
- 视觉SLAM笔记(33) 对极约束求解相机运动
- 一文看懂:光学行业 三摄+潜望式+3D
- 【IPFS应用开发】--zabbix监控接口配置
- 计算机不能读手机内存不足,手机装内存卡只读不写手机64G内存卡32G,64用完显示还剩32G但警告空间不足...
- 深入学习Gremlin(5):查询路径path
- 孙陶然:有能力的第三个标准是有亮点
- 孙陶然:公司要与员工分享
- 【keepass】每次打开软件总是弹出指定的文件不存在,如何关闭和清除以前打开数据库的文件记录?
- Android用mediaPlayer.prepare()报错
- 论文解读(NWR)《Graph Auto-Encoder via Neighborhood Wasserstein Reconstruction》