vue3+element-plus+el-image实现点击按钮预览大图

需求：点击某个按钮实现el-image中预览大图的效果

官方文档：以下是官方的写法，并不能达到我们的要求，官方实现的功能是点击图片达到预览大图的效果。如果你的按钮就是图片，也可以达到目前的功能

1.el-image-viewer

el-image-viewer组件是element官方的组件，只是文档中没有写出来，这个组件就是大图预览的组件，当引用ElImage组件的时候，需要把ElImageViewer也需要引入，就可以直接用这个组件了

2.通过ref直接调用el-image的单击事件

以下是vue2的写法，网上搜索的，没有去实现过，我把这种写法改成vue3的写法发现好像不能实现，后面选择了第一种写法

    
    

点击按钮查看大图

import logo from '../../assets/logo.png';
export default {
  name: "vue_project",
  data() {
    return {
      url: logo,
      srcList: [logo]
    }
  },
  methods: {
    viewBigPicture(){
      this.$refs.previewImg.showViewer = true; //vue2写法第一种写法
      this.$refs.previewImg.clickHandler();     //vue2写法第二种写法
    }
  }
}

vue3写法

    
    

点击按钮查看大图