vue项目使用vue-photo-preview插件实现点击图片放大预览和移动
官方链接:
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插件实现点击图片放大预览和移动的更多相关文章
- 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件
		后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ... 
- 从零构建vue项目(三)--vue常用插件
		一.直接拉取的模板中,package.json如下: { "name": "vuecli2-test", "version": " ... 
- vue项目 一行js代码搞定点击图片放大缩小
		一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ... 
- HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)
		转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ... 
- 一款基于jQuery可放大预览的图片滑块插件
		今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ... 
- 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 ... 
- 创建一个vue 项目 必备的几个插件
		第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm install -g cnpm - ... 
- 在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频)
		vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ... 
- 在Vue项目中 选择图片并预览
		最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ... 
随机推荐
- Qt 密码框不可选中、复制、粘贴、无右键菜单等
			在做用户登录.修改密码的时候,往往会用到密码框,其中一些功能要求与普通的输入框不同. 例如:不能选中.复制.粘贴.无右键菜单等功能,当然设置密码不可见是必须的! 一般的密码框:(默认 可以选中,复制, ... 
- Opencv Mat运算(转)
			一.矩阵Mat I,img,I1,I2,dst,A,B; double k,alpha; Scalar s; //注意Mat的行列号是从0开始的 //定义矩阵a,b,c Mat a,b,c; //生成 ... 
- 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 ... 
- Go的微服务库kite
			Kite Kite是用Go开发的一套RPC库,很适合作为分布式微服务的开发框架. Kite 的传输层使用 SockJS 提供的WebSocket服务, 浏览器Javascript也可以连接到Kite上 ... 
- 仿迅雷播放器教程 -- C++界面制作方法的对比 (9)
			上一个教程对比的5个方向共7个界面框架,都是非常权威,应用很广泛的库,绝对是非常稳定,并且能够做出常见的界面出来,可以放心大胆的用在项目里. 但那7个界面框架再好,也总是没有绝对的优势 ... 
- SpringBoot------如何将项目打成war包
			1.修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:/ ... 
- Spring 整合 Junit4 进行单元测试
			1. pom.xml 引入JAR依赖: <dependency> <groupId>junit</groupId> <artifactId>junit& ... 
- Kubernetes部署SpringCloud(一)  Eureka 集群,解决unavailable-replicas,available-replicas条件
			环境 k8s master: 1个 k8s node: 3个 三个eureka 指定node启动,并且使用network=host 完整pom.xml <?xml version="1 ... 
- xrdp完美实现Windows远程访问Ubuntu 16.04
			前言: 在很多场景下,我们需要远程连接到Linux服务器(本文是Ubuntu),传统的连接主要分为两种. 第一种:通过SSH服务(使用xshell等工具)来远程访问,编写终端命令,不过这个是无界面的, ... 
- WCF中序列化(XML\JSON\Dt)
			序列化 是将对象转换为容易传输的格式的过程.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象. 序列化描述了持久化 ... 
