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 ...
随机推荐
- gridEh的bug
grideh的bug,delphi和c++builder都存在. RAD自带的原始grid控件是好的. procedure TForm12.DBGridEh2ColExit(Sender: TObje ...
- 固定顶部指定div不滑动
.fixed_div { position:fixed; z-index:100; top: 45px; width:100%; height:45px; } 指定div设置属性position:fi ...
- ORM对单表的增删改查
表记录的增加: 1)b = Book(name='python', price=99) b.save() 2)Book.objects.create(name='python', price=99) ...
- C++ 连接Oracle
下面是一个ADO方式连接Oracle的小程序部分代码...... 首先是Oracle的配置.在Oracle的安装路径下找到:Oracle\network\ADMIN\tnsnames.ora文件.配置 ...
- ORA-00600: internal error code, arguments: [4193]问题解决
操作环境 SuSE+Oracle11gR2 问题现象 单板宕机自动重启后,ORACLE运行不正常,主要表现如下: 1.执行shutdown immedate停止数据库时,提示ORA-00600: in ...
- [ 测试思维 ] 启发式测试策略模型(HTSM)
什么是HTSM 启发式测试策略模型(Heuristic Test Strategy Model,简称HTSM)是测试专家James Bach提出的一组帮助测试设计的指南(Guide line).HTS ...
- openwrt用WEB刷固件型号不对问题强行处理
参照这里:https://blog.csdn.net/caoshunxin01/article/details/79355602 原机是一块mt7620A的通板,之前刷了一个叫WE826型号的固件,发 ...
- 16进制转ascii,转字符串
/** * 16进制转化为字母 * @param hex 要转化的16进制数,用逗号隔开 * 如:53,68,61,64,6f,77 * @return */ public static String ...
- Delphi实现图像文本旋转特效完整代码
Delphi实现图像文本旋转特效完整代码,本程序利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_ro ...
- C#中让WebBrowser运行Javascript脚本
C#中可以让Webbrowser运行Javascript脚本来实现各种自动化操作,比如点击网页上的按钮,输入用户名密码等等.代码也很简单: >>>>>>>&g ...