在开发中,经常会遇到这样的需求,就是点击图片,能够放大预览。在网上找到了一款很好用的插件。拿来即用,不需要复杂的配置。特此记录下(这里只是针对于在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插件)的更多相关文章

  1. vue图片查看器

    vue 安装图片查看器插件安装cnpm install v-viewer引用 import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewe ...

  2. Window Phone 8 应用程序连接扩展图片中心,图片扩展,图片查看器

    WMAppManifest.xml <?xml version="1.0" encoding="utf-8"?> <Deployment xm ...

  3. Bitmap图片查看器

    在Android 应用中使用assets目录下存放的资源文件,assets目录下存放的资源代表应用无法直接访问的原生资源,应用程序通过AssetManager以二 进制流的形式来读取资源.此应用是查看 ...

  4. Android中的图片查看器

    本案例,使用Eclipse来开发Android2.1版本号的图片查看器. 1)首先,打开Eclipse.新建一个Android2.1版本号的项目ShowTu,打开res/values中文件夹下的str ...

  5. Android 调整透明度的图片查看器

    本文以实例讲解了基于Android的可以调整透明度的图片查看器实现方法,具体如下:  main.xml部分代码如下: <?xml version="1.0" encoding ...

  6. 如何在pyqt中使用 QGraphicsView 实现图片查看器

    前言 在 PyQt 中可以使用很多方式实现照片查看器,最朴素的做法就是重写 QWidget 的 paintEvent().mouseMoveEvent 等事件,但是如果要在图像上多添加一些形状,那么在 ...

  7. wpf 仿QQ图片查看器

    参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图 ...

  8. 发布两款JQ小插件(图片查看器 + 分类选择器),开源

    图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...

  9. wpf图片查看器,支持鼠标滚动缩放拖拽

    最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...

随机推荐

  1. STS中poem.xml配置文件

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  2. C++标准库第二版笔记 2.1

    C++标准库第二版笔记 2.1 1 Range-Based for 循环 for ( decl : coll ) { statements; } // collaborate 类似C# foreach ...

  3. oracle 中如何查看某个表所涉及的存储过程

    SELECT DISTINCT * FROM user_source WHERE TYPE = 'PROCEDURE' AND upper(text) LIKE '%PS_KL_ABS_002_DAT ...

  4. Maven捆绑TestNG实现测试自动化执行、部署和调度

    一. 需求介绍 自动化测试,尤其是接口测试时,要写大量的测试用例,这些测试用例我们当然首选使用TesteNG编写,用例数量大,还涉及各种依赖包之类的问题,因此用Maven管理也是最方便最易实现的. 面 ...

  5. 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} ...

  6. JAVA 8 主要新特性 ----------------(七)新时间日期 API ----- Duration “时间”间隔

    Duration:用于计算两个“时间”间隔 简介: 用法: 1.Zero常量 实例: Duration duration = Duration.ZERO; System.out.println(&qu ...

  7. media 标签解释

    一:常用标签这句话是自动设置缩放,然而,它并不能完全适应所有的手机,并且你在用浏览器手机模式调试的时候可能正常,但是换到真实的手机端其实是不正常的.所以我们还要进行改动. <meta name= ...

  8. HTML之二 -特殊标签 与数据交互标签

    1.<img>  标签 © <h1> <img src="1.jpg" width="200" height="200& ...

  9. python 文件与数据格式化

    https://www.cnblogs.com/li-zhi-qiang/p/9269453.html       文件和数据格式化 https://www.cnblogs.com/li-zhi-qi ...

  10. .NET CORE迁移踩坑

    https://www.cnblogs.com/leolaw/p/10740678.html