【箩筐地图】获取模板中的ref元素，作为弹窗的内容，可使弹窗内容更可控

上一篇：【箩筐地图】vue项目中使用箩筐地图（web端），对点进行icon标记，点击标记弹窗显示点位信息

问题：官网提供的案例都是用模板字符串拼接的元素，复杂且不好控制样式和交互

const content = [
        `<img src='https://lkimgyt.luokuang.com/1587364867424.jpg'><span>${extData.name}</span>`,
        `<label>地址: 宣外大街8号庄胜崇光百货南馆</label>`,
        `<label>电话: 13888888888</label>`,
        `<label>营业时间: 10:00-23:00</label>`
      ].join("<br/>");

解决思路：

1.模板中正常写元素，给元素样式display：“none”，即不让这个元素展示在界面上

<div class="info_window" ref="inforWindow" style="display: none">
      <div class="info_title">设备名称</div>
      <div class="attribute">
        <span class="name">设备状态:</span>
        <span class="value">工作中</span>
      </div>
      <div class="attribute">
        <span class="name">投运时间:</span>
        <span class="value">2021-20-1</span>
      </div>
      <div class="attribute">
        <span class="name">开关控制:</span>
        <span class="value">
          <el-switch
            v-model="IsOpend"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </span>
      </div>
    </div>

2.在markerClick函数中，复制元素，把元素的display改为block，将复制的节点通过outerHTML属性获取描述元素（包括其后代）的序列化 HTML 片段，作为函数传参

markerClick(e) {
      const extData = e.layer.getExtData();
      const title = "";
      const cloneNode = this.$refs.inforWindow.cloneNode(true);
      cloneNode.style.display = "block";
      const content = cloneNode.outerHTML;
      this.inforWindow = new LKMap.InforWindow({
        anchor: "bottom",
        className: "customClassName",
        content: this.createInfoWindow(title, content),
        isCustom: true, //使用自定义窗体
        offset: new LKMap.Pixel(0, -16), // 设置信息窗体偏移量
      });

      const markerPosition = e.layer.getPosition();
      // this.inforWindow.setText(extData.name);
      this.inforWindow.open(this.map, markerPosition);
    },

效果：