详解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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
js中!和!!的区别与用法
May 09 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内存相关的功能特性详解
2013/06/08 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
浅谈php冒泡排序
2014/12/30 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
学习ExtJS table布局
2009/10/08 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
JSON 数据格式详解
2017/09/13 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
js实现小星星游戏
2020/03/23 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python运行其他程序的实现方法
2017/07/14 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python如何从键盘获取输入实例
2020/06/18 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
办公室文秘岗位职责
2013/11/15 职场文书
工地安全检查制度
2014/02/04 职场文书
户外活动总结范文
2014/04/30 职场文书
企业环保标语
2014/06/10 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python