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 ...
随机推荐
- go语言基本语法
一个例子总结go语言基本语法 demo.go package main import ( "fmt" ) //结构体 type PersonD struct ...
- MybatisMapper 动态映射(增删改查)
//接口内容以及注意事项 package cn.jy.mybatis.mapper; import java.util.List; import cn.jy.mybatis.pojo.User; pu ...
- web网站使用qq第三方登录
Html代码: <a href=’/QQlogin’>qq登录</a> //后台代码: @RequestMapping(value = "/QQlogin" ...
- Ubuntu学习之路
一. Ubuntu简介 Ubuntu(乌班图)是一个基于Debian的以桌面应用为主的Linux操作系统,据说其名称来自非洲南部祖鲁语或科萨语的“ubuntu”一词,意思是“人性”.“我的存在是因为大 ...
- thymeleaf拆分头部(head)显示异常问题
问题描述: 刚用thymeleaf不久,考虑到公共头部的导入css,js代码,需要拆分. 拆分之后,bootstrap-select下拉多选框出现“样式异常”,本认为是头部拆分问题,css样式未导入成 ...
- Java--druidAPI查询
maven依赖<dependency> <groupId>in.zapr.druid</groupId> <artifactId>druidry< ...
- angular点击查看更多(简单demo)
今天来跟大家分享一个小的demo,一般网页浏览到底部的时候会有一个点击加载更多的按钮,之前一直纠结怎么写这个,今天学习angular时发现可以用组件来实现这么一个小的效果,大家有兴趣的话可以看一下. ...
- nginx上传文件时 nginx 413 Request Entity Too Large 错误
产生原因: 上传文件的大小超出了 Nginx 允许的最大值,默认是1M: 解决方法: 修改Nginx的配置文件(一般是:nginx/nginx.conf),在 http{} 段中增大nginx上传文件 ...
- Cookie的使用(14)
一:cookie的简要介绍: (1)什么是cookie a.cookie是一种客户端的状态管理技术b.当浏览器向服务器发送请求的时候,服务器会将少量的数据以set-cookie消息头的方式发送给浏览器 ...
- 20145232韩文浩 《网络对抗技术》 Web基础
Apache 因为端口号80已经被占用(上次实验设置的),所以先修改/etc/apache2/ports.conf里的端口为5232后重新开启 可以在浏览器中输入localhost:5208来检查是否 ...