在数据元素上输出 html

Question

所以我有以下函数修改来自 openlayers 的元素。

正如您在 documentation 上看到的那样，属性标签接受 html 或字符串

    methods: {
      onUpdatePosition (coordinate) {
        this.deviceCoordinate = coordinate
        this.$refs.map.$map.getControls().extend([
          new ZoomToExtent({
            label: `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
          <path fill="currentColor" d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z" />
        </svg>`,
          })
        ])
      },
    }

当然输出是纯文本，我怎样才能在那里输出实际的html？

Answer 1

标签可以是 HTMLElement，而不是包含 HTML 代码的字符串。

尝试

var myLabelHTML = document.createElement('span');
myLabelHTML.innerHTML = '<svg style="width:24px;height:24px" viewBox="0 0 24 24">
          <path fill="currentColor" d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z" />
        </svg>';

//...

new ZoomToExtent({
      label:myLabelHTML;
    });

在数据元素上输出 html

Output html on a data element

javascript

openlayers

vue.js