vue好用的图片查看器(v-viewer插件)
在开发中,经常会遇到这样的需求,就是点击图片,能够放大预览。在网上找到了一款很好用的插件。拿来即用,不需要复杂的配置。特此记录下(这里只是针对于在vue脚手架下的使用方法)。
1、安装依赖包。
npm install v-viewer --save
2、在main.js中配置如下:
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css' Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
3、在需要使用图片查看的文件中使用如下:
<viewer :images="images">
<img v-for="src in images" :src="src" :key="src">
</viewer>
上面的images是一个数组,用来存放需要预览的图片的路径的。
vue好用的图片查看器(v-viewer插件)的更多相关文章
- vue图片查看器
vue 安装图片查看器插件安装cnpm install v-viewer引用 import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewe ...
- Window Phone 8 应用程序连接扩展图片中心,图片扩展,图片查看器
WMAppManifest.xml <?xml version="1.0" encoding="utf-8"?> <Deployment xm ...
- Bitmap图片查看器
在Android 应用中使用assets目录下存放的资源文件,assets目录下存放的资源代表应用无法直接访问的原生资源,应用程序通过AssetManager以二 进制流的形式来读取资源.此应用是查看 ...
- Android中的图片查看器
本案例,使用Eclipse来开发Android2.1版本号的图片查看器. 1)首先,打开Eclipse.新建一个Android2.1版本号的项目ShowTu,打开res/values中文件夹下的str ...
- Android 调整透明度的图片查看器
本文以实例讲解了基于Android的可以调整透明度的图片查看器实现方法,具体如下: main.xml部分代码如下: <?xml version="1.0" encoding ...
- 如何在pyqt中使用 QGraphicsView 实现图片查看器
前言 在 PyQt 中可以使用很多方式实现照片查看器,最朴素的做法就是重写 QWidget 的 paintEvent().mouseMoveEvent 等事件,但是如果要在图像上多添加一些形状,那么在 ...
- wpf 仿QQ图片查看器
参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图 ...
- 发布两款JQ小插件(图片查看器 + 分类选择器),开源
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...
- wpf图片查看器,支持鼠标滚动缩放拖拽
最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...
随机推荐
- EasyPR源码剖析(4):车牌定位之Sobel算子定位
一.简介 sobel算子主要是用于获得数字图像的一阶梯度,常见的应用是边缘检测. Ⅰ.水平变化: 将 I 与一个奇数大小的内核进行卷积.比如,当内核大小为3时, 的计算结果为: Ⅱ.垂直变化: 将: ...
- 洛谷P3916||图的遍历||反向建图||链式前向星||dfs
题目描述 给出 NN 个点, MM 条边的有向图,对于每个点 vv ,求 A(v)A(v) 表示从点 vv 出发,能到达的编号最大的点. 解题思路 看起来很简单的一道题, 但我依然调了一天,我还是太菜 ...
- 服务器上部署Struts2的web项目报struts-default.xml:131:154的解决方法
背景: 用学生特价买了阿里云的服务器一年,为了练手,开始把毕业设计项目部署到该服务器上去. 项目使用的技术:Struts2 服务器上用tomcat启动该项目. 问题: 在楼主本地启动tomcat成功, ...
- matplotlib -- 基础知识
matplotlib 组织图表的方式 最上层是一个 Figure 实例,包含了所有可见的和其他一些不可见的内容.该 Figure 实例包含了一个 Axes 实例的成员属性 Figure.axes,同时 ...
- OO第二单元多线程电梯总结
OO第二单元多线程电梯总结 第一次作业 设计思路 Input为输入线程,负责不断读取请求并将读到的请求放入调度器中. Dispatcher为调度器,是Input线程和Elevator线程的共享对象,采 ...
- 不能ping通主机名
https://www.linuxidc.com/Linux/2017-03/142253.htm sudo apt-get install winbind , sudo apt-get instal ...
- git服务搭建以及本地连接
服务器系统:centos6.5 本地系统:Mac 10.11 注意事项:本地git和服务器版本最好一样,centos上面的yum install git版本是1.7的,需要手动在下载,并手动编译 下载 ...
- mui框架下拉刷新和上拉刷新
当初写的时候,是用的谷歌浏览器测试的,都可以正常刷新,下载到手机上面,在ios是可以刷新的,在安卓上面就刷新不了,就是拉不动,后来慢慢排除不是HTML的原因,是上下拉代码有问题,刚开始看的时候也没问题 ...
- MyBatis-Plus 3.0.3 Sql注入器添加,即全局配置Sql注入器,sqlInjector改写
官网上写着 但是,这个其实是2.0系列的写法,由于引用了最新的3.0.3这个功能基本不好使. 3.0.3版本的写法 也就是中间加了一层,原来是AutoSqlInjector,现在改为AbstractS ...
- 让Spring Boot项目启动时可以根据自定义配置决定初始化哪些Bean
让Spring Boot项目启动时可以根据自定义配置决定初始化哪些Bean 问题描述 实现思路 思路一 [不符合要求] 思路二[满足要求] 思路三[未试验] 问题描述 目前我工作环境下,后端主要的框架 ...