1. ivew-admin table

  {
title: '产品图片',
key: 'avatar1',
align: 'center',
render: (h, params) => {
return h('div',
[
h('img', {
style: {
width: "45px",
height: '45px',
verticalAlign: "middle",
marginTop: '3px',
marginBottom: '3px'
},
attrs: {
src: params.row.avatar1
},
on:{
click:(e)=>{
//点击预览图片
this.handleView(e.srcElement.currentSrc)
}
}
},)
]);
}
},

  

 2.定义初始数据
   imgUrl: '',
visible: false,

  3.放大事件

 handleView(url) {
this.imgUrl = url;
this.visible = true;
},

4.model

<Modal title="查看大图" v-model="visible" class-name="fl-image-modal">
<img :src="imgUrl" v-if="visible" style="width:100%;height:100%">
</Modal>

  效果:

												

ivew-admin 点击预览图片的更多相关文章

  1. 微信小程序:点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  2. 巧用weui.gallery(),点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  3. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  4. 微信小程序预览图片

    选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml ...

  5. 微信小程序:点击预览大图功能

    点击预览大图功能 1. 给轮播图swiper-item绑定点击事件 2. 预览功能的本质是调用了小程序的api:previewImage 微信公众号----文档----开发----API----媒体- ...

  6. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  7. [js/jquery]移动端手势拖动,放大,缩小预览图片

    摘要 有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能.最终通过touch.js这个插件实现了效果. touch.js Touch.js是移动设备上的手势识别与事件库, 由百度 ...

  8. ftp如何预览图片 解决方案

    下载使用 server-U ,开启 HTTP 服务,输入 http://ip:端口 后,登录ftp账号密码,可选使用 基于java的应用 web client 或 FTP Voyager JV,来预览 ...

  9. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

随机推荐

  1. BZOJ3207 花神的嘲讽计划I

    Time Limit: 10 Sec Memory Limit: 128 MB Summary 给你一个模式串P,q个询问,对每个询问回答从Pl到Pr是否存在与给定串相同的子串,同时有所有的给定串长度 ...

  2. 洛谷3321 SDOI2015 序列统计

    懒得放传送[大雾 有趣的一道题 前几天刚好听到Creed_神犇讲到相乘转原根变成卷积的形式 看到这道题当然就会做了啊w 对于m很小 我们暴力找原根 如果你不会找原根的话 出门左转百度qwq 找到原根以 ...

  3. zoj 3325 Machine(线段树)

    题意:0~n-1的数组,初始值为0:执行m个操作,每次操作执行后输出当前值为0的连续段的段数. 操作1: p i j : i~j区间的每个元素值减1 操作2: r i j :i~j区间的每个元素值加1 ...

  4. umeditor word文档图片粘贴-自动上传到服务器

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  5. python的map、reduce和filter(过滤器)函数(廖雪峰老师python基础)

    1.map 语法: map(func,Iterable) map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的Iterator返 ...

  6. SQL学习记录:函数(二)

    字符串函数 1.获取字符的ASCII码 语法结构: ASCII(espression)    这里的expression是一个返回char或varchar数据类型的表达式,ASCII函数仅对表达式最左 ...

  7. VMware中对Linux虚拟机的网络配置静态IP的配置

    前言 踏出象牙塔,进入公司,由于公司的所有产品都是Linux下的,必然自己这段时间需要在自己的工作机器先学习一下.项目代码是用Source Insight进行查看的,总是Ctrl + Alt的切来切去 ...

  8. Adobe Premiere

    工具 移动工具(Selection Tool)快捷键(V) 最最常用的工具,常规功能是移动素材以及控制素材的长度 配合 ctrl:可以拖拽素材,移动到切入点进行插入 配合 shift:选择多目标(可以 ...

  9. Linux下MySQL 命令导入导出sql文件

    导出数据库 直接使用命令: mysqldump -u root -p database >database.sql 然后回车输入密码就可以了: mysqldump -u 数据库链接用户名 -p ...

  10. Kali开启SSH服务

    1.    一.配置SSH参数 修改sshd_config文件,命令为: vi /etc/ssh/sshd_config 将#PasswordAuthentication no的注释去掉,并且将NO修 ...