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 ...
随机推荐
- hdfs数据采集场景示意图
- sql server 2008 64位连接sql 2000服务器的时候出现
来源 https://blog.csdn.net/loeley/article/details/7095741 sql server 2008 64位连接sql 2000服务器的时候出现以下提示: 链 ...
- guns开源项目数据库切换为oracle
本次使用oracle版本 11.2.0.1.0 1.guns-core 修改pom.xml 文件引入oracle驱动 <dependency> <groupId>com.ora ...
- Mac 安装配置Jenkins+github完成项目构建
Jenkins Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件.Jenkins 支持各种运行方式,可通过系统包, Docker 或者通过一个独立的 J ...
- 微信小程序 - 曲线图
最近要做微信小程序,项目中需要曲线图显示数据,所以在网上看了一下找了很久都没有找到一个,不知道是我查找的姿势不对,还是什么的.所以就自己做了一个曲线图,现在分享给大家. wxml代码: <can ...
- license
http://139.199.89.239:1008/4571ab86-eb0d-4d2b-999e-37406bb8ba38 _~~~ rO0ABXNyAChjb20uemVyb3R1cm5hcm9 ...
- eclipse中opencv配置
1.打开Eclipse,Window->preferences 2.进入preferences后,找到Java->Build Path->User Libraries,点击New 在 ...
- Python的条件判断语句------if/else语句
计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户的年龄,根据年龄打印不同的内容... Python程序中,能让计算机自己作出判断的语句就是if语句: 例: age = 25 ...
- wx支付
开通微信商户号且开通微信公众平台微信支付功能 104680c86fd352725be198b02dc8258b 微信公众号和微信商户平台在微信支付中扮演的角色,公众号是我们在网页要进行支付的场所, ...
- mixer中动态Alpha通道处理案例
本案例处理的是RGB+a,每个色彩的采样为10位位宽. 1.在Mixer IP中打开Alpha Blending Enable 和Alpha Input Stream Enable.这样在Blo ...