官方链接:

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. Qt 密码框不可选中、复制、粘贴、无右键菜单等

    在做用户登录.修改密码的时候,往往会用到密码框,其中一些功能要求与普通的输入框不同. 例如:不能选中.复制.粘贴.无右键菜单等功能,当然设置密码不可见是必须的! 一般的密码框:(默认 可以选中,复制, ...

  2. Opencv Mat运算(转)

    一.矩阵Mat I,img,I1,I2,dst,A,B; double k,alpha; Scalar s; //注意Mat的行列号是从0开始的 //定义矩阵a,b,c Mat a,b,c; //生成 ...

  3. VS2012+openCV 2.4.8进行编译:VS2012 64位 使用OPENCV应用程序不能正常启动 (0xc000007b)怎么处理?

    [OpenCV入门教程之一] 安装OpenCV:OpenCV 2.4.8 +VS 开发环境配置 http://blog.csdn.net/poem_qianmo/article/details/198 ...

  4. Go的微服务库kite

    Kite Kite是用Go开发的一套RPC库,很适合作为分布式微服务的开发框架. Kite 的传输层使用 SockJS 提供的WebSocket服务, 浏览器Javascript也可以连接到Kite上 ...

  5. 仿迅雷播放器教程 -- C++界面制作方法的对比 (9)

        上一个教程对比的5个方向共7个界面框架,都是非常权威,应用很广泛的库,绝对是非常稳定,并且能够做出常见的界面出来,可以放心大胆的用在项目里.     但那7个界面框架再好,也总是没有绝对的优势 ...

  6. SpringBoot------如何将项目打成war包

    1.修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:/ ...

  7. Spring 整合 Junit4 进行单元测试

    1. pom.xml 引入JAR依赖: <dependency> <groupId>junit</groupId> <artifactId>junit& ...

  8. Kubernetes部署SpringCloud(一) Eureka 集群,解决unavailable-replicas,available-replicas条件

    环境 k8s master: 1个 k8s node: 3个 三个eureka 指定node启动,并且使用network=host 完整pom.xml <?xml version="1 ...

  9. xrdp完美实现Windows远程访问Ubuntu 16.04

    前言: 在很多场景下,我们需要远程连接到Linux服务器(本文是Ubuntu),传统的连接主要分为两种. 第一种:通过SSH服务(使用xshell等工具)来远程访问,编写终端命令,不过这个是无界面的, ...

  10. WCF中序列化(XML\JSON\Dt)

    序列化 是将对象转换为容易传输的格式的过程.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象. 序列化描述了持久化 ...