vue 点击图片显示大图
使用指南:https://www.npmjs.com/package/vue-directive-image-previewer
简单使用:
1.安装vue-directive-image-previewer
命令行
npm install vue-directive-image-previewer -D
2.main.js中引入
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)
3.组件中引用
<template>
<div>
<img v-image-preview src="picture-url"/>
</div>
</template>
效果

转载自:https://blog.csdn.net/y895315416/article/details/82963396
vue 点击图片显示大图的更多相关文章
- JQuery - 点击图片显示大图
效果: 目录结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...
- 一天JavaScript示例-点击图片显示大图片添加鼠标
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 点击图片查看大图(纯js)
$(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...
- [原创]WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果
一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...
- WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- ionic中点击图片看大图的实现
在页面上显示了几张图片后,因为是手机端,图片会有点小的感觉,就想着怎么样才能让用户点击小图片看到大图呢,项目中ionic结合angularjs实现了这个功能 1.首先是三张小图上应添加一个函数,当点击 ...
- (1)vue点击图片预览(可旋转、翻转、缩放、上下切换、键盘操作)
今天做项目的时候,遇到了新需求,需要把点击图片放大的功能.学习了一下GitHub上的viewerjs插件 GitHub地址:https://github.com/fengyuanchen/viewer ...
- jQuery插件——imgbox(点击图片查看大图)
需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...
随机推荐
- 现学现卖——VS2013 C#测试
VS2013 C#测试 首先安装Unit Test Generator.方法为:工具->扩展和更新->联机->搜索“Unit Test Generator”,图标为装有蓝色液体的小试 ...
- git 配置提交过滤文件
1)在Git项目中定义.gitignore文件 2)在Git项目的设置中指定排除文件 3)定义Git全局的 .gitignore 文件
- JSP基本_EL式
1.EL式下記二種類がある.① ${式} : JSPの出力(レンダリング)時に評価 (JSP2.0から)② #{式} : タグハンドラにより任意のタイミングで評価 (JSP2.1から) 2.オブジェク ...
- PHP常量总结
概念 常量我们可以理解为值不变的量.常量只要被定义了,在程序脚本的其他任何地方都不能改变. 因为常量被定义后不能被修改,所以即使重定义常量的值,常量的值也是第一次定义常量时的值 常量不管在哪里被定义, ...
- Shell函数使用方法
Shell函数是一组命令集或语句组成一个可用块.利用函数可以简化脚本编写.函数要求先定义再使用,调用函数时直接使用函数名即可.这里主要介绍shell编程中函数定义.调用.获取函数参数以及获取函数返回值 ...
- java实现excel表格导出
Java 实现导出excel表 POI 1.首先下载poi-3.6-20091214.jar,下载地址如下: http://download.csdn.net/detail/evangel_z/389 ...
- editable : false与 readonly 的区别
editable : false 不能输入 readonly:不可操作,只能看
- cv2.SIFT() AttributeError: 'module' object has no attribute 'SIFT' OpenCV Python can't use SURF, SIFT
参考链接: https://stackoverflow.com/questions/18561910/opencv-python-cant-use-surf-sift For recent infor ...
- python基础学习Day15 面向对象、类名称空间、对象名称空间 (2)
一.类 先看一段代码: class Person: animal = '高级动物' walk_way = '直立行走' # 静态属性,静态变量,静态字段 language = '语言' def __i ...
- Excel添加下拉菜单
一.选中需要下拉菜单的单元格 二.数据--数据校验 三 .选择序列,填写来源 四.保存