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 ...
随机推荐
- 【iCore1S 双核心板_ARM】例程十三:SDIO实验——读取SD卡信息
实验现象: 核心代码: int main(void) { /* USER CODE BEGIN 1 */ HAL_SD_TransferStateTypedef State; /* USER CODE ...
- win7(64bit)+python3.5+pyinstaller3.2安装和测试
最近因为做项目需要,需要在win7中安装pyinstaller用于将.py文件生成脱离python平台的可执行程序*.exe文件. 安装步骤 第一步:安装python3.5 [下载python3.5的 ...
- Java知多少(82)标签、按钮和按钮事件简介
标签和按钮也许是图形界面中最常见的两种组件,按钮又总是与激发动作事件有关. 标签 标签(JLabel)是最简单的Swing组件.标签对象的作用是对位于其后的界面组件作说明.可以设置标签的属性,即前景色 ...
- Java知多少(100)图像处理基础
图像是由一组像素构成,用二进制形式保存的图片.java语言支持GIF.JPEG和BMP这3种主要图像文件格式.java语言的图像处理功能被封装在Image类中. 图像载入和输出 在java程序中,图像 ...
- qualcomm wifi kernel beacon loss 日志记录
记录一下高通对于beacon loss的处理的日志.方便后面再来分析. 04:17:13.397139 [04:17:13.383909] [000000A81699E7EC] [VosMC] wla ...
- 工具链接redis
RedisDesktopManager 链接 文件位置 /usr/loca/redis/etc/redis.conf 一.注释redis.conf文件中的:bind 127.0.0.1(在一段文字之前 ...
- Maven支撑下的War应用依赖另外一个WAR应用的解决方案
最近在做项目中,用Maven管理项目间的依赖关系,遇到一个问题,快折腾死了,不过初步试出来一种解决方案.在此把问题及解决方案描述一下,以资共享. 问题描述:有两个项目A和B,Dynamic Web ...
- CentOS 6.7 配置 yum 安装 nginx
第一步,在/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vim nginx.repo 填写如下内容: [nginx] na ...
- SpringBoot自定义错误页面,SpringBoot 404、500错误提示页面
SpringBoot自定义错误页面,SpringBoot 404.500错误提示页面 SpringBoot 4xx.html.5xx.html错误提示页面 ====================== ...
- WebApi中的Session与Token间的处理对接
首先,说起来创建session,一般会针对注册登录或者授权等情况: session 从字面上讲,就是会话.这个就类似于你和一个人交谈,你怎么知道当前和你交谈的是张三而不是李四呢?对方肯定有某种特征(长 ...