element 查看大图组件-阿里云开发者社区

开发者社区> 萌萌茹> 正文

element 查看大图组件

简介: element 查看大图组件
+关注继续查看
注意需要导入组件才可使用
 import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
代码
<template>
    <div>
      <el-image-viewer 
           v-if="showViewer" 
           :on-close="closeViewer" 
           :url-list="[url]" />
     <el-button @click="onPreview">查看大图</el-button>
    </div>
</template>
<script>
    // 导入组件
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    export default {
      name: 'showViewer',
      components: { ElImageViewer },
      data() {
        return {
          showViewer: false, // 显示查看器
          url:'https://lovelydong.com/wp-content/themes/Memory-master/img/default_bg.jpg'
        }
      },
      methods: {
        onPreview() {
          this.showViewer = true
        },
        closeViewer() {
          this.showViewer = false
        }
    }
</script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Linux下查看内核、CPU、内存及各组件版本的命令和方法
查看内核版本: uname -a                          more /etc/*release                           more /etc/redhat-release       ...
1115 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9565 0
Linux用户和组管理,查看软件缓存,通过命令查看硬件信息(cpu,版本,序列号,内存,主板,内核等)
 通过修改/etc/inittab.通过这个文件修改系统的启动方式. ls –l /etc/ | more   (管道),将前面的结果交给后面的命令进行处理。 在linux中遇到问题使用man命令。 查找文件信息并将文件存储到一个制定的文件中。 ls –la &gt; “a.txt” 创建组名: 创建组:
1799 0
《Android程序设计》一1.3 SDK的组件
本节书摘来自华章出版社《Android程序设计》一 书中的第1章,第1.3节,作者:G. Blake Meike, Masumi Nakamura,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1651 0
App 组件化/模块化之路——Android 框架组件(Android Architecture Components)使用指南
面对越来越复杂的 App 需求,Google 官方发布了Android 框架组件库(Android Architecture Components )。为开发者更好的开发 App 提供了非常好的样本。这个框架里的组件是配合 Android 组件生命周期的,所以它能够很好的规避组件生命周期管理的问题。
793 0
vue的组件通信
我们知道vue的精华就在于组件话开发,第一次看vue的时候懵懵懂懂,只是大概了解了怎么去用。今天闲来无事第二次去看发现了很多精华的东西,现在写出来与大家分享下。
1078 0
对select组件的封装
引言: 在我们平时开发过程中,可能都会使用到下拉框这个组件,里面的值要么是动态的,要么是静态的,但是方便日后的维护,大多数都会将他配置成代码项封装成集合,通过遍历,生成动态的数据,这个数据都是从跳转的控制器以集合的形式带过来,这会导致每写一个select都要从后台把这个集合带过来吗,然后再去遍历,这从代码的设计角度来看,非常的臃肿,很难实现低耦合,除非下拉框里面的数据是业务中产生的数据,不得不这样做。
1069 0
+关注
4
文章
42
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载