ElementUI 中 ElImageViewer 组件的使用与属性说明

前言

• ElImageViewer是Image组件的内置组件，主要实现图片的预览功能，对于这个组件官方文档没有过多介绍，但有些需求可以单独使用。
• 组件的属性可以到源码中查看，但是如果只是为了看一下传参我建议直接用vue的调试工具devtools查看，比较方便。

Image组件中实现图片预览

建议直接去官方文档查看

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>

<script>
  export default {
    data() {
      return {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
</script>

ElImageViewer 组件使用方法

html

<!-- 这里用 v-if 和 v-show 的区别是 v-if 每次都会重置默认第一张预览图，由 initialIndex 属性指定，而 v-show 会缓存上次切换的那张图 -->
<el-image-viewer
  v-if="showViewer"
  :initial-index="1"
  :on-close="onClose"
  :on-switch="onSwitch"
  :url-list="urlList"
/>

js

// 引入ElImageViewer组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
    ElImageViewer
  },
  data() {
    return {
      // 是否显示
      showViewer: false,
      urlList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  methods: {
    // 关闭图片预览
    onClose() {
      this.showViewer = false
    },
    // 切换图片 index为图片下标值
    onSwitch(index) {
      console.log(index)
    }
  }
}

ElImageViewer 组件属性说明

Attributes

参数	说明	类型	可选值	默认值
initialIndex	默认显示的第一张预览图（urlList的下标值）	Number	--	0
urlList	预览图的地址列表	Array	--	[]
zIndex	设置图片预览的 z-index	Number	--	2000
onClose	关闭图片预览时的回调函数	Function	--	--
onSwitch	切换上一张下一张图片时的回调函数	Function	--	--