高德地图信息窗体InfoWindow 使用element UI组件进行图片放大

高德地图信息窗体InfoWindow 使用element UI组件

需求：高德地图信息窗体InfoWindow里面的图片可以进行大图预览
解决方案，使用Vue.extend和element UI的el-image

import {
    
     Image }  from 'element-ui' //先要引入组件

 creatTextName(map, siteMarker, item, middleMarkers, type) {
    
    
   //这个是在驾车规划的途径点上面
      const {
    
     lineNameStr, spotNameStr, pathListNameStr } = this.toParams;
      // 给 Text 带上自定义私货
      siteMarker.lisaSiteInfo = item;
      // 监听地图- Text 的 点击事件
      const imgList = []
      const img =  this.changeImgUrl(item.image) //这里是个http地址
      imgList.push(img)
      const clickHandler1 = function (e) {
    
    
        const Content = Vue.extend({
    
    
                template: `<div>
                            <p>通行图片</p>
                            <el-image :preview-src-list="imgList" :src="imgList[0]" style="width: 300px; heigth: 300px">
                            </el-image>
                          </div>`,
                name: 'pageInfo',
                components: {
    
    
                    'el-image':Image //注册组件
                },
                data(){
    
    
                    return {
    
    
                        imgList:imgList
                    }
                }
             });
 
        const component = new Content().$mount();
        const infoWindow = new AMap.InfoWindow({
    
    })
        infoWindow.setContent(component.$el);
        infoWindow.open(map, e.lnglat)
      };
      siteMarker.on("click", clickHandler);
      siteMarker.setMap(map);
      middleMarkers.push(siteMarker);
      //-------siteText-------
      // label默认蓝框白底左上角显示，样式className为：amap-marker-label
      let text = "";
      if (type) {
    
    
        // text = item.latitude;
        text = item[spotNameStr];
      } else {
    
    
        text = "";
      }
      const siteText = new AMap.Text({
    
    
        offset: new AMap.Pixel(0, -50), //设置文本标注偏移量
        text: text,
        position: new AMap.LngLat(item.longitude, item.latitude), // 这里特殊 本数据结构， startLatitude
        map: map,
      });
      siteText.lisaSiteInfo = item;
      siteText.on("click", clickHandler);
      siteText.setMap(map);
      middleMarkers.push(siteText);
      return middleMarkers;
    },

点击图片后就可以直接放大预览了

刚开始使用的大图预览用的是插件v-viewer，但是v-viewer在使用的时候页面解析成了function

就会报错，后面只能换成UI组件，有知道原因的大佬帮忙解答一下