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. axios之前端发送get与post请求模板

    import axios from "axios"; 一.get mounted() { axios .get( "/api/queryusertree?domId=&q ...

  2. List接口和Set接口及其常用实现类概述

    一.List接口 List:有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的元 ...

  3. vue自定义抽屉组件

    <template> <div class="drawer"> <div :class="maskClass" @click=&q ...

  4. java连接远程服务器并执行命令

    导入必要的jar包 <dependency>  <groupId>ch.ethz.ganymed</groupId> <artifactId>ganym ...

  5. mobx学习笔记02——mobx基础语法(class)

    新的语法可能不被浏览器支持,可以使用babel转换为浏览器支持的代码格式: 为什么要定义class? js是一门面向对象的编程语言.需要利用类来复用代码,提高编程效率. 需要什么样的class能力? ...

  6. git常用操作命令1

    1. 本地库初始化操作 命令: git init 效果: Initialized empty Git repository in E:/ws/git/ws/.git/ 会在当前目录(E:/ws/git ...

  7. Angular JS - 6 - Angular JS 常用指令

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. Delphi ListView的用法

    //增加 i := ListView1.Items.Count; with ListView1 do begin ListItem:=Items.Add; ListItem.Caption:= Int ...

  9. CMMI模型

    CMMI的成熟度级别 初始级(过程不可预测,管理和控制差,是反应式的)管理级(过程处于项目级,经常是反应式的)定义级(过程已经提升到组织级(OSSP))定量管理级(对过程进行度量,并进行统计控制)优化 ...

  10. LUOGU P4088 [USACO18FEB]Slingshot(线段树)

    传送门 解题思路 推了推式子发现是个二维数点,想了想似乎排序加线段树难写,就写了个树套树,结果写完看见空间才\(128M\)..各种奇技淫巧卡空间还是\(MLE\)到天上.后来只好乖乖的写排序+线段树 ...