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

    1,首次打开的基本设置 2,过滤抓包的内容 1)较为常用的是: URL包含和hosts的设置 2)不常用的是 3,设置https 这是实在安装证书,当还是不能抓到https的包的时候,可以区安装彼得证 ...

  2. NC 创建表空间数据库

    1.首先创建表空间 CREATE SMALLFILE TABLESPACE "NNC_DATA01" LOGGING DATAFILE 'D:\NCOracle\nc633sd\N ...

  3. java 日志体系(四)log4j 源码分析

    java 日志体系(四)log4j 源码分析 logback.log4j2.jul 都是在 log4j 的基础上扩展的,其实现的逻辑都差不多,下面以 log4j 为例剖析一下日志框架的基本组件. 一. ...

  4. GUI学习之三——QObject学习总结

    鉴于PyQt控件的继承关系,我们先学习PyQt控件的基类——QObject.  一.所有的QT对象的基类 我们先看一下PyQt里空间的继承关系,稍微改一下代码,显示出继承关系 from PyQt5.Q ...

  5. Intellij IDEA 环境 tomcat 启动设置

    第一步:选择新的新的配置,我选择是Tomcat Server----->Local配置 第二步:配置Server属性 第三步:配置Deployment 第四步:配置Logs,默认配置 第五步:配 ...

  6. DNN原理探究系列之目录与序章篇

    序言: 神经网络结构,作为最成功的机器学习模型之一,其工作原理一直被埋藏得比较深,其解释性以至于被称为黑盒. 自己对于DNN的理解也只能算刚踏入了门槛,对于人脑的原理与DNN原理之间的互通性,一直是非 ...

  7. 微信小程序的一些小知识点

    1. <text>hello</text> 只有包含在<text>标签内的文字,在手机上才可以长按选中. 2. 单位px:自适应rpx = 1:1 物理像素除以2得 ...

  8. JavaScript深拷贝

    1,JSON.parse(JSON.stringify(obj)) 使用JSON实现深拷贝必须要求对象是符合JSON安全的,不了解JSON安全的自行百度. 2,lodash/underscore  _ ...

  9. 第52章:Java操作MongoDB-[Mongo-Java-3.x]

    ①范例:连接数据库 package cn.mldn; import com.mongodb.MongoClient; import com.mongodb.MongoClientURI; import ...

  10. Git合并指定一系列commits到另一个分支

    Git合并指定文件到另一个分支经常被问到如何从一个分支合并特定的文件到另一个分支.其实,只合并你需要的那些commits,不需要的commits就不合并进去了. 合并某个分支上的单个commit首先, ...