详解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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
JavaScipt基本教程之前言
Jan 16 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
MooTools 1.2介绍
Sep 14 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
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 获取可变函数参数的函数
2009/08/26 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
div层的移动及性能优化
2010/11/16 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
vue.js表格分页示例
2016/10/18 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
创先争优活动承诺书
2014/08/30 职场文书
公司市场部岗位职责
2015/04/15 职场文书
少年雷锋观后感
2015/06/10 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
MySQL慢查询的坑
2021/04/28 MySQL
python Django框架快速入门教程(后台管理)
2021/07/21 Python