ElementUI使用按钮进行图片预览

使用ElementUI组件进行图片预览

Element官网给出的组件为el-image组件，该组件是点击图片时进行预览。
而我需要的是点击按钮进行预览图片，需求是点击预览按钮后先去请求接口返回图片，等图片返回后直接将图片预览展示。
找到了el-image-viewer组件，该组件预览效果图在最后。

预览简单使用demo

1.引入组件

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

2.页面
预览组件

	<!-- 预览组件 -->
    <el-image-viewer
      v-if="showViewer"
      :on-close="
        () => {
          showViewer = false;
        }
      "
      :url-list="srcList"
    >
    </el-image-viewer>

预览按钮

<!-- 预览按钮 -->
  <el-button
    type="text"
    size="middle"
    @click="viewImage()"
    >预览</el-button>

js中使用预览时只需要将showViewer设为true即可。

data() {
    return {
      showViewer: false,
      srcList: [    	
    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      
    };
  },
methods: {

viewImage(){
 this.showViewer = true;
}
}

实战演示

预览按钮：

点击预览按钮的预览效果。