文档:https://www.npmjs.com/package/vue-directive-image-previewer 【只能弹框查看 不能关闭和播放下一张,其他功能使用别的插件】

安装:

npm install vue-directive-image-previewer -D

引入 main.js

import VueImageView from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueImageView, {
zIndex: '2019' /*弹框的图片级别设置高点 才能在最上层 看的到 更多参数见文档*/
})

使用

<img v-image-preview src="some-pic-url"/>

vue 点击图片放大的更多相关文章

  1. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  2. (1)vue点击图片预览(可旋转、翻转、缩放、上下切换、键盘操作)

    今天做项目的时候,遇到了新需求,需要把点击图片放大的功能.学习了一下GitHub上的viewerjs插件 GitHub地址:https://github.com/fengyuanchen/viewer ...

  3. 网页mp3语音展示,点击图片放大,点击图片跳转链接,调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  4. JavaScript 点击图片放大功能

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. js+jquery+html实现在三种不通的情况下,点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  6. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  7. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

  8. layui点击图片放大-多图显示

    layui点击图片放大-多图显示 标签(空格分隔): js HTML // div <div id="photo-list"> <img class=" ...

  9. ios-点击图片放大,背景变半透明

    在view中点击一个图片,图片放大,背景变半透明,图片不会变透明的效果图如下 思路:图片框是一个按钮,监听点击事件. 当点击图片后:改变图片的frame,使图片放大,并且在controller.vie ...

随机推荐

  1. python 通过js控制滚动条拉取全文 通过psutil获取pid窗口句柄,通过win32gui使程序窗口前置 通过autopy实现右键菜单和另存为操作

    1.参考 利用 Python + Selenium 自动化快速截图 利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素) 使用python获取系统所有进程PID以及进程名 ...

  2. Swift 统计项目中所有按钮的点击次数

    class Swizzle: NSObject { override class func load() { UIButton.xxx_swizzleSendAction() } } extensio ...

  3. ssl证书专题(3):创建CA和申请证书

    请看:  https://www.cnblogs.com/mingzhang/p/8949541.html

  4. CodeForces 958F3 Lightsabers (hard) 启发式合并/分治 多项式 FFT

    原文链接http://www.cnblogs.com/zhouzhendong/p/8835443.html 题目传送门 - CodeForces 958F3 题意 有$n$个球,球有$m$种颜色,分 ...

  5. Java eclipse导入外部项目时出错怎么解决

    从外部环境import一个项目进入Java工作环境中,若出现以下错误,解决方法如下: 鼠标移上去,会出现以下错误提示: 解决方法: 选中该项目->右键->Build path->Co ...

  6. mybatis查询语句的背后

    转载请注明出处... 一.前言 在先了解mybatis查询之前,先大致了解下以下代码的为查询做了哪些铺垫,在这里我们要事先了解,myabtis会默认使用DefaultSqlSessionFactory ...

  7. webpack打包后访问不到json文件

    一.问题描述 在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败. 二.预期结 ...

  8. (三)ajax请求不同源之cors跨域

    一.基本原理 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出 XMLHttpReque ...

  9. 在Linux下用gcc编译hello world

    1. 确保Linux系统里已经装好了gcc 测试:输入gcc后是如下的结果就说明已经安装成功 2. 创建HelloWorld.c 使用 touch 创建一个空文件; 用vim编辑 按下A或者I 插入 ...

  10. XVIII Open Cup named after E.V. Pankratiev. Ukrainian Grand Prix

    A. Accommodation Plan 对于已知的$K$个点,离它们距离都不超过$L$的点在树上是一个连通块,考虑在每种方案对应的离$1$最近的点统计. 即对于每个点$x$,统计离它距离不超过$L ...