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 ...
随机推荐
- Repeater数据控件的两个重要事件ItemDataBound 和 ItemCommand
1 ItemDataBound:数据绑定的时候(正在进行时)发生. 2 ItemCommand :用来响应Item模板中的控件的事件. 如下代码 aspx代码: [html] view plain c ...
- bootstrap学习-初步使用介绍
准备 下载Bootstrap https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip h ...
- [js] 处理字符串换行造成的json解析失败
需求:从数据库某个字段取出字符串出来,转为json,结果发现报错为 解析失败,发现是因为取出的字符串换行导致,现在需要将字符串里面的换行替换为'',使字符串可依成功解析成json对象. 技术:依靠re ...
- MinGW 使用 mintty 终端替代默认终端以解决界面上复制与粘贴的问题
使用了一段时间的 cygwin,挺开心的,又尝试了下同类工具 Msys + MinGW,安装好之后发现它居然使用默认的 cmd 作为终端,界面输出内容的复制与粘贴极其不便,我记得 Cygwin 使用的 ...
- Microsoft.Identity的IPasswordHasher加密的默认实现与运用
本文版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文地址 www.cnblogs.com/tdws 相信了解了MS Identity认证体系的一定知道UserManager的作用,他是整个体 ...
- Oracle:使用nginx做为代理访问
nginx 必须启用 启用 --with-stream 模块. 可下载源码编译. nginx.conf的配置: worker_processes ; events { worker_connectio ...
- docker中,如何将镜像保存为tar文件或者将镜像保存为文件,将tar文件导入到docker中
需求说明: 在实际使用docker的过程中,比如某些机器不能上网,恰巧需要某些docker镜像,一般可以采用在能上网的机器上,pull下来基础镜像,然后将docker 镜像保存为文件,在不能上网的机器 ...
- 修改torndb库为依赖pymysql,使其适应python3,一个更简单的操作数据库的类。
1.python的MySQLdb和pymysql是两个基本数据库操作包,MySQLdb安装很麻烦,要有c++相关环境,python3也安装不了. python3一般安装pymysql,此包与MySQL ...
- SpringBoot(十七)-- 定时任务
日常开发中,经常会使用定时任务来执行跑批,springboot默认已经帮助我们整合了定时任务. 参考:https://blog.csdn.net/u013845177/article/details/ ...
- JMeter命令行执行及问题解决 Error in NonGUIDriver java.lang.RuntimeException: Could not find the TestPlan class!
下面介绍的是在windows环境下如何运行jmeter linux 命令相同 1.首先要准备好脚本,并且设置好线程属性,假设我们设置一个线程,循环一次. 2. ...