详解elementui之el-image-viewer(图片查看器)


Posted in Javascript onAugust 30, 2019

前言

随着版本的更新Element UI新增了新的组件,例如:Image,没错今天被我发了Image下面可通过 previewSrcList 开启预览大图的功能。

这是官方文档中有写的,但是我想不使用Image组件又想使用预览大图的功能是否可行呢?

答案是当然可以。

使用方法

翻看了Image的源码,发现大图预览是一个小组件image-viewer,打开看看它的props,如下

props: {
  urlList: {
   type: Array,
   default: () => []
  },
  zIndex: {
   type: Number,
   default: 2000
  },
  onSwitch: {
   type: Function,
   default: () => {}
  },
  onClose: {
   type: Function,
   default: () => {}
  }
 }

我们需要使用到的就只有urlList与onClose两个属性 ,一个用来放图片链接一个用来关闭查看器。

需要使用的属性我们知道了,然后我们就在代码里面引入image-viewer就可以直接使用。

<template>
  <div>
    <el-button @click="onPreview">预览</el-button>
    <el-image-viewer 
           v-if="showViewer" 
           :on-close="closeViewer" 
           :url-list="[url]" />
  </div>
</template>
<script>
  // 导入组件
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  
  export default {
   name: 'Index',
   components: { ElImageViewer },
   data() {
    return {
     showViewer: false, // 显示查看器
     url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    }
   },
   methods: {
    onPreview() {
     this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
     this.showViewer = false
    }
   }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
vue+koa2实现session、token登陆状态验证的示例
Aug 30 #Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 #Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 #Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 #Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 #Javascript
java实现单链表增删改查的实例代码详解
Aug 30 #Javascript
vuex vue简单使用知识点总结
Aug 29 #Javascript
You might like
PHP中调用JAVA
2006/10/09 PHP
聊天室php&amp;mysql(一)
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
python实现bucket排序算法实例分析
2015/05/04 Python
Python 复平面绘图实例
2019/11/21 Python
django自定义模板标签过程解析
2019/12/14 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
家长给孩子的表扬信
2014/01/17 职场文书
股指期货心得体会
2014/09/13 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
南京大屠杀观后感
2015/06/02 职场文书
中学教代会开幕词
2016/03/04 职场文书
会计专业自荐信范文
2019/05/22 职场文书
详解Redis主从复制实践
2021/05/19 Redis