官方链接:

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. zookeeper 入门(二)

    上一篇教程中重点讲解了如何部署启动一台zookeeper服务 本章中我们会重点讲解下如何 部署一套zookeeper的集群环境 基于paxos 算法,部署一套集群环境要求 至少 要有3个节点  并且节 ...

  2. C#获取文件版本信息

    使用FileVersionInfo获取版本信息 FileVersionInfo info = FileVersionInfo.GetVersionInfo(Application.Current.St ...

  3. STM32 多通道ADC采样,采用Timer1进行采样率控制,利用DMA进行传输

    http://blog.csdn.net/varding/article/details/17559399 http://www.51hei.com/stm32/3842.html https://w ...

  4. Java编程的逻辑 (77) - 异步任务执行服务

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  5. 关于Unity中NGUI的背包实现之Scrollview(基于Camera)

    基于UIPanel的scrollview实现方式在移动设备上的性能不如基于camera的方式.因为UIPanel的scrollview实现方式要渲染很多的道具图,性能自然就降低了.如果是用第二个摄像机 ...

  6. iLBC

    iLBC是一种专为包交换网络通信设计的编解码,优于目前流行的G.729.G.723.1,对丢包进行了特有处理,即使在丢包率 相当高的网络环境下,仍可获得非常清晰的语音效果.

  7. [Linux] 如何禁止使用口令只允许使用密钥建立 SSH 连接

    1. 创建 SSH KEY 使用 ssh-keygen 生成一个密钥对,并且将公钥注册到服务器的 $HOME/.ssh/authorized_keys 文件. 2. 确保启用 SSH 公钥认证功能 查 ...

  8. 为C函数自动添加跟踪语句

    目录 为C函数自动添加跟踪语句 声明 一. 问题提出 二. 代码实现 2.1 函数匹配测试 2.2 插入跟踪语句 三. 效果验证 为C函数自动添加跟踪语句 标签: Python 正则表达式 声明 本文 ...

  9. Android Studio开发第一篇QuickStart

    为什么把as的环境开发放在gradle里呢,因为eclipse里装gradle插件还是不够方便,as直接集成了,然后正好as也是大势所趋,学习一下正好. 看到右边Quick Start快速启动栏下面 ...

  10. Mybatis 的 xml 文件语法错误,启动项目时控制台一直循环解析但是不打印错误

    重写SqlSessionFactoryBean的buildSqlSessionFactory方法: eg: package com.slp; import java.io.IOException; i ...