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

    注:优化样式表:增加css样式表的可读性 减伤样式重复 一.主要内容 1.布局分类;131   121 2.display属性排版 3.float属性排版(横向多列布局) 4.防止父类盒子塌陷 二.标 ...

  2. AX_CreateAndPostSales

    static void CreateAndPostSales(Args _args) { List il = new List(Types::Record); SalesTable localSale ...

  3. tp3

    入口文件:index.php目录结构:核心,Thinkphp 公共资源,public jq 上传的图片等 应用目录,application 房模块 common:基于模块的公共目录,公共函数命名:类: ...

  4. Flask 学习目录

    Flask 学习目录 Flask 的学习过程是一个了解如何从单个模块搭建一个 Web 框架的过程. Python.Flask 的安装和设置 简单的 Hello World 程序 使用 Jinjia2 ...

  5. Chapter6_访问权限控制_访问权限修饰词

    Java中有四种访问权限,public,private,protected和包访问权限,它们是置于类中每一个成员之前的定义,无论是一个域还是一个方法,下面一一介绍. 一.包访问权限 如果不提供任何访问 ...

  6. 适用于Mac 的自动补丁管理软件

    适用于Mac 的自动补丁管理软件 ManageEngine Desktop Central 的功能越来越神奇.系统管理员现在可以使用 Desktop Central 管理异构网络.即使是最复杂的任务, ...

  7. Python从入门到精通之Seventh!

    函数浅析:可以减少代码重用,保持一致性,可扩展性,易维护性. 定义方法:def 函数名(形参):     '''功能注释'''      代码块 打印函数名时,会出现函数的内存地址.两个函数名相同时, ...

  8. WPF一组Radio与enum绑定

    工作中用到了一组RadioButton对应一组数据的情况,这个时候最好能将一组RadioButton绑定Enum. 步骤 1.MyControl库中Type.cs中定义Enum namespace M ...

  9. easyui属性赋值

    了解easyui tree组件的童鞋估计都知道tree的node有他自己单独的属性(id,text,iconCls,checked,state,attribute,target).而原先这个几个属性想 ...

  10. MySQL/Oracle索引的创建与使用

    MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 索引分单列索引和组合索引. 单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引 ...