el-image-viewer图片预览功能

<template>
  <div>
    <h2>el-image-viewer图片预览功能</h2>
    <h3>
      el-image 组件是自带图片预览功能的，传入 preview-src-list
      即可。但有时候我们不用 image
      组件但又想预览大图怎么办？例如点击一个按钮时弹出一个图片查看器？
      答案是使用
      el-image-viewer，文档里并没有这个组件，但通过查看源码知道，该组件正是
      el-image 里预览图片所用的。
    </h3>
    <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://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      ],
      initialIndex: 0,
    };
  },

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

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