Bootstrap

element-ui Image组件中的隐藏功能el-image-viewer组件的使用

就是想通过点击这个按钮,显示大图预览,Image默认是要需要缩略图的,这个地方是不用缩略图的,记录下解决方法
在这里插入图片描述

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
...
 components: { ElImageViewer },
 data(){
 	return {
	srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      isShowPics: false
	}
 },
 methods:{
	handlePreview() {
      this.isShowPics = true
    },
    onPreview() {
      this.isShowPics = true
    },
    // 关闭查看器
    closeViewer() {
      this.isShowPics = false
    },
}
...
<el-image-viewer
        v-if="isShowPics"
        :on-close="closeViewer"
        :url-list="srcList"
      />

这样就轻松实现了预览大图的效果
在这里插入图片描述

;