文档: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. 微信H5支付证书过滤

    在对接微信支付,退款的时候,遇到 Caused by: java.lang.RuntimeException: java.io.IOException: DerInputStream.getLengt ...

  2. 使用FLASK+winscp在服务器端发布一个表白网页

    本地环境采用Windows 环境下Pycharm开发环境.

  3. fire workflow总结

    一.Fire WorkFlow核心1.IPersistenceService存储服务.Fire Workflow 缺省情况下使用hibernate 进行数据库存取.如果你的系统不是使用hibernat ...

  4. 金蝶K3 WISE BOM多级展开_销售成本表

    /****** Object: StoredProcedure [dbo].[pro_bobang_SaleCost] Script Date: 07/29/2015 16:13:43 ******/ ...

  5. Log.isLoggable之一正确的使用姿势

    DEBUG方法比较当我们在做APP开发时,需要设置调试开关打印Log,下面我列举出3种方法: 方法一:直接赋值public static final boolean DEBUG = true;//fa ...

  6. Java Spring Boot VS .NetCore (六) UI thymeleaf vs cshtml

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  7. XVIII Open Cup named after E.V. Pankratiev. Grand Prix of SPb

    A. Base $i - 1$ Notation 两个性质: $2=1100$ $122=0$ 利用这两条性质实现高精度加法即可. 时间复杂度$O(n)$. #include<stdio.h&g ...

  8. virtualbmc 使用

    virtualbmc 介绍 通常情况下,我们要使用 IPMI必须使用有带外管理功能的物理机.但是在很多测试环境,我们使用的是虚拟机.virtualbmc是一个可以使用 IPMI命令来控制虚机的open ...

  9. Json.NET Performance Tips

    原文: http://www.newtonsoft.com/json/help/html/Performance.htm To keep an application consistently fas ...

  10. Codechef August Challenge 2018 : Interactive Matrix

    传送门 首先整个矩阵可以被分为很多小矩阵,小矩阵内所有行的单调性是一样的,所有列的单调性是一样的. 考虑如何在这样一个小矩阵中找出答案.我的策略是每次取四个角中最大值和最小值的点,这样可以每次删掉一行 ...