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 ...
随机推荐
- STS中poem.xml配置文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- C++标准库第二版笔记 2.1
C++标准库第二版笔记 2.1 1 Range-Based for 循环 for ( decl : coll ) { statements; } // collaborate 类似C# foreach ...
- oracle 中如何查看某个表所涉及的存储过程
SELECT DISTINCT * FROM user_source WHERE TYPE = 'PROCEDURE' AND upper(text) LIKE '%PS_KL_ABS_002_DAT ...
- Maven捆绑TestNG实现测试自动化执行、部署和调度
一. 需求介绍 自动化测试,尤其是接口测试时,要写大量的测试用例,这些测试用例我们当然首选使用TesteNG编写,用例数量大,还涉及各种依赖包之类的问题,因此用Maven管理也是最方便最易实现的. 面 ...
- Codeforces Round #536 (Div. 2) F 矩阵快速幂 + bsgs(新坑) + exgcd(新坑) + 欧拉降幂
https://codeforces.com/contest/1106/problem/F 题意 数列公式为\(f_i=(f^{b_1}_{i-1}*f^{b_2}_{i-2}*...*f^{b_k} ...
- JAVA 8 主要新特性 ----------------(七)新时间日期 API ----- Duration “时间”间隔
Duration:用于计算两个“时间”间隔 简介: 用法: 1.Zero常量 实例: Duration duration = Duration.ZERO; System.out.println(&qu ...
- media 标签解释
一:常用标签这句话是自动设置缩放,然而,它并不能完全适应所有的手机,并且你在用浏览器手机模式调试的时候可能正常,但是换到真实的手机端其实是不正常的.所以我们还要进行改动. <meta name= ...
- HTML之二 -特殊标签 与数据交互标签
1.<img> 标签 © <h1> <img src="1.jpg" width="200" height="200& ...
- python 文件与数据格式化
https://www.cnblogs.com/li-zhi-qiang/p/9269453.html 文件和数据格式化 https://www.cnblogs.com/li-zhi-qi ...
- .NET CORE迁移踩坑
https://www.cnblogs.com/leolaw/p/10740678.html