element-ui之el-image-viewer(圖片查看器)

前言

隨着版本的更新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>