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

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

• ElImageViewer是Image组件的内置组件，主要实现图片的预览功能，对于这个组件官方文档没有过多介绍，但有些需求可以单独使用

使用方法

<!-- 这里用 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"
/>

// 引入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)
    }
  }
}