vue elment大图查看

<template>
  <div>
    <el-button @click="open">打开图片预览</el-button>
    <el-image-viewer
      v-if="show"
      :on-close="onClose"
      :url-list="urls"
      :initial-index="initialIndex"
    />
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  components: {
    ElImageViewer
  },

  data() {
    return {
      show: false,
      urls: ['https://img0.baidu.com/it/u=391928341,1475664833&fm=26&fmt=auto&gp=0.jpg'],
      initialIndex: 0
    }
  },

  methods: {
    open() {
      this.show = true
    },

    onClose() {
      this.show = false
    }
  }
}
</script>