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 ...
随机推荐
- c# group by list
ViewBag.PnlTotal = pnlTotal; // 柱形图 string data = ""; string cat = ""; string bu ...
- text-align: justify;浏览器、安卓手机不兼容问题
https://segmentfault.com/a/1190000013146385
- Rust语言学习笔记(6)
Traits(特质) // 特质 pub trait Summary { fn summarize(&self) -> String; } pub struct NewsArticle ...
- 删除node_modules文件夹
老版本的npm对有node_modules文件夹太长的问题,新版本就没有这个问题.2.7? npm install rimraf -g rimraf node_modules
- 16进制转ascii,转字符串
/** * 16进制转化为字母 * @param hex 要转化的16进制数,用逗号隔开 * 如:53,68,61,64,6f,77 * @return */ public static String ...
- Android DevArt6:Android中IPC的六种方式
Android中IPC的六种方式 1.使用Bundle 最简单的进程间通信方式:Intent + Bundle: 支持三大组件:Activity.Service.BroadcastReceiver : ...
- pycharm 配置服务器,脚本,测试文件
配置django服务器 我们配置在用pycharm开发的时候,一般都是习惯于python manage.py runserver 0.0.0.0:80000 这种方式,但是,该方式并不能进入debug ...
- eval解析字符串为JSON对象
对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次. 这种方式也适合以普通j ...
- C# 13位时间戳转换成标准时间C#代码
原地址:https://www.cnblogs.com/yixuehan/p/5559244.html /// <summary> /// 时间戳转换成标准时间 /// </summ ...
- 如何用java完成一个中文词频统计程序
要想完成一个中文词频统计功能,首先必须使用一个中文分词器,这里使用的是中科院的.下载地址是http://ictclas.nlpir.org/downloads,由于本人电脑系统是win32位的,因此下 ...