vue 利用el-image-viewer 实现预览图片大图

vue 首先在

<template>
  <div>
         <el-image-viewer
            v-if="showViewer"
            :on-close="closeViewer"
            :url-list="[url]"
        />
  </div>
</template>
<script>
      //引入el-image-viewer 
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
          export default {
              components: {
                    ElImageViewer,//注册
                },
            data() {
                  return {
                          url:'',//放大的图片
                          showViewer:false//打开预览/关闭
                    }
                },
               methods: {
                    closeViewer(){ //关闭
                        this.showViewer = false
                   },
                   lodData(){
                            //这里可以写接口    用返回的图片赋值 给 url

                      },
          }
</script>