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 ...
随机推荐
- 去除partner页面消息 自动添加关注者的功能
某些公司希望在partner页面说些partner的坏话,可是odoo居然自动添加了partner关注,这就尴尬了.... 如果恰搭建了邮件服务器,很有可能就自动发到了客户邮箱里,等着炸锅吧.... ...
- 阿里云 FTP 无法读取目录问题
安全组除了添加制定 FTP端口外 需要加入再添加1024/65535端口 放行策略,ftp被动模式需要随机开一个此范围端口进行传输 添加安全组规则参考文档:https://help.aliyun.co ...
- MUI 打包android app
自有证书生成方法 manifest配置 (2).图标配置:所有图片格式必须是png,且严格符合分辨率要求.使用其他图片格式重命名为png会导致打包失败.配置图标时选择自动生成所有适用图标,选择一个大图 ...
- swoole webSocket服务
socket.php <?php //创建websocket服务器对象,监听0.0.0.0:9502端口 $ws = ); //监听WebSocket连接打开事件 (刚打开的时候会给客户端发送 ...
- 设计模式 -创建型模式 ,python工厂模式 抽象工厂模式(1)
工厂模式 import xml.etree.ElementTree as etree import json class JSONConnector: def __init__(self, filep ...
- [Laravel] 06 - Project: from Usercase to View
故事背景 一.项目预览 From: https://www.imooc.com/video/12518 二.知识点 通过项目复习之前的重难点,在此列出并解决. /* implement */ 项目开始 ...
- SpringBoot------Maven Clean报错
报错信息: Plugin org.apache.maven.plugins:maven-clean-plugin: or one of its dependencies could not be re ...
- 【python】关键网站
https://pypi.org https://www.python.org/search/?q=pyhanlp&submit= https://www.lfd.uci.edu/~gohlk ...
- 关于思科C2950交换机清除密码,恢复初始配置的方法
上个月河南做项目,因需要大批量的对服务器进行操作系统的安装,于是想到了PXE网络批量安装, 好不容易到机房的仓库找到网线及一台思科交换机,但到安装的时候,发现思科交换机里应该有配置了 通过配置线连接交 ...
- HTML+CSS:圆形和圆角图片格式
效果展示 实现代码 <!DOCTYPE html> <html> <head> <title>JcMan</title> <style ...