详解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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 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转换IP地址到真实地址的方法详解
2013/06/09 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
phpfpm的作用和用法
2019/10/10 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
TensorFlow实现Batch Normalization
2018/03/08 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
制定岗位职责的原则
2013/11/08 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
绩效工资分配方案
2014/01/18 职场文书
数控个人求职信范文
2014/02/03 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
师德师风演讲稿
2014/05/05 职场文书
高中同学会活动方案
2014/08/14 职场文书
汇报材料怎么写
2014/12/30 职场文书
置业顾问岗位职责
2015/02/09 职场文书
小学校长开学致辞
2015/07/29 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android