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

前言

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

Image组件中实现图片预览

建议直接去官方文档查看

ElImageViewer 组件使用方法

html

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