官方链接：

http://npm.taobao.org/package/vue-photo-preview

# 安装

npm install vue-photo-preview --save

# 引入

import preview from 'vue-photo-preview'

import 'vue-photo-preview/dist/skin.css'

Vue.use(preview)

//或者

//var option={....} option配置请查看 http://photoswipe.com/documentation/options.html

//Vue.use(preview,option)
# html

//在img标签添加preview属性 preview值相同即表示为同一组

<img src="xxx.jpg" preview="0" preview-text="描述文字">

//分组

<img src="xxx.jpg" preview="1" preview-text="描述文字">

<img src="xxx.jpg" preview="1" preview-text="描述文字">

<img src="xxx.jpg" preview="2" preview-text="描述文字">

<img src="xxx.jpg" preview="2" preview-text="描述文字">

<img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="缩略图与大图模式">

vue项目使用vue-photo-preview插件实现点击图片放大预览和移动的更多相关文章

  1. 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

    后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...

  2. 从零构建vue项目(三)--vue常用插件

    一.直接拉取的模板中,package.json如下: { "name": "vuecli2-test", "version": " ...

  3. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  4. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  5. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

  6. Asp.Net Core 2.0 项目实战（3）NCMVC角色权限管理前端UI预览及下载

    Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...

  7. 创建一个vue 项目 必备的几个插件

    第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm  install  -g  cnpm  - ...

  8. 在Vue项目使用quill-editor带样式编辑器（更改插入图片和视频）

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...

  9. 在Vue项目中 选择图片并预览

    最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...

随机推荐

  1. PHP扩展类ZipArchive实现压缩解压Zip文件和文件打包下载

    文章转载自:https://my.oschina.net/junn/blog/104464 PHP ZipArchive 是PHP自带的扩展类,可以轻松实现ZIP文件的压缩和解压,使用前首先要确保PH ...

  2. git配置用户名邮箱，全局配置/单仓库配置

    在项目根目录下进行单仓库配置(作用域只在本仓库下): git config user.name "gitlab's Name" git config user.email &quo ...

  3. (原)关于获取ffmpeg解析rtsp流sdp中带有sps,pps的情况

     转载请注明出处:http://www.cnblogs.com/lihaiping/p/6612511.html 今天同事准备在android下使用ffmpeg来获取rtsp流,问我如何获取获取sps ...

  4. WAS生成的文件：javacore.***.txt 、heapdump.***.phd、core.***.dmp、Snap.***.trc

    WAS生成的常见文件有哪些? 原文链接:http://blog.csdn.net/pqh20085101092/article/details/39370389 javacore.***.txt : ...

  5. react中实现搜索结果中关键词高亮显示

    网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换. react中实现起来似乎更简单一些. 我这里的需求是通过搜索框搜索出新闻列表,在 ...

  6. Java中浮点数的处理

    import java.text.DecimalFormat; String addGold = String.valueOf(new DecimalFormat("0").for ...

  7. duilib进阶教程 -- 在duilib中使用MFC (2)

    好人做到底,送佛送到西.虽然上一篇教程已经说得很详细了,但Alberl还是再举一个例子.上一篇教程的主窗口是MFC的,所以这篇教程把主窗口换成duilib的~O(∩_∩)O~ 1.我们利用<20 ...

  8. VMware Workstation11安装Mac OS X 10.10虚拟机

    原文:http://jingyan.baidu.com/article/3f16e003eac66e2591c103e0.html 优化:http://www.cnblogs.com/yipu/p/4 ...

  9. OSG模拟鼠标事件影响操纵器

    viewer->getEventQueue()->mouseButtonPress(0,0,1); viewer->getEventQueue()->mouseMotion(1 ...

  10. Ubuntu14.04下安装redis-3.2.0以及开机自启动

    去官网下载Redis-3.2.0.tar.gz,将redis-3.2.0.tar.gz放入/opt目录下 解压redis-3.2.0.tar.gz xiaoyao@xiaoyao-virtual-ma ...