如何通过vue-portal在Highcharts提示框中渲染Vue组件？

解决思路与实现代码 #

1. 保持Portal存活，避免组件反复销毁重建 #

不用每次切换悬停点时关闭/重启Portal，而是动态更新Portal的目标DOM容器，同时更新传入TooltipFormatter的point数据，这样组件始终存活，进度条等动画不会中断。

在Chart.vue中：

<template>
  <div class="chart-wrapper">
    <highcharts :options="chartOptions" ref="chartRef"></highcharts>
    <portal v-if="currentPoint" :target="tooltipTarget">
      <TooltipFormatter :point="currentPoint" />
    </portal>
  </div>
</template>

<script>
import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'
import TooltipFormatter from './TooltipFormatter.vue'
import Portal from 'vue-portal'

export default {
  components: {
    HighchartsVue,
    TooltipFormatter,
    Portal
  },
  data() {
    return {
      currentPoint: null,
      tooltipTarget: null,
      chartOptions: {
        tooltip: {
          useHTML: true,
          formatter: function() {
            // 临时隐藏tooltip，避免渲染闪烁
            this.chart.tooltip.label.div.style.visibility = 'hidden'
            // 记录当前tooltip的DOM容器
            this.chart.tooltip.currentDiv = this.chart.tooltip.label.div
            // 调用Vue组件方法更新目标容器和当前point
            this.chart.vueComponent.updateTooltipTarget(this.chart.tooltip.currentDiv, this.point)
            // 返回mock内容用于Highcharts计算tooltip尺寸
            return this.chart.vueComponent.getMockTooltipHTML(this.point)
          },
          hide: function() {
            // 隐藏tooltip时清空当前point
            this.chart.vueComponent.clearCurrentPoint()
          }
        },
        // 你的其他图表配置...
      }
    }
  },
  mounted() {
    // 将Vue组件实例绑定到chart对象，方便Highcharts回调访问
    this.$refs.chartRef.chart.vueComponent = this
  },
  methods: {
    updateTooltipTarget(div, point) {
      this.tooltipTarget = div
      this.currentPoint = point
      // DOM更新后恢复tooltip可见性
      this.$nextTick(() => {
        if (this.tooltipTarget) {
          this.tooltipTarget.style.visibility = 'visible'
        }
      })
    },
    clearCurrentPoint() {
      this.currentPoint = null
    },
    // 优化的mock HTML生成方法
    getMockTooltipHTML(point) {
      // 创建复用的隐藏临时容器
      if (!this.$refs.mockContainer) {
        const mockDiv = document.createElement('div')
        mockDiv.style.display = 'none'
        document.body.appendChild(mockDiv)
        this.$refs.mockContainer = mockDiv
      }
      // 渲染TooltipFormatter到临时容器
      const vm = new this.$options.components.TooltipFormatter({
        parent: this,
        propsData: { point }
      })
      vm.$mount(this.$refs.mockContainer)
      const html = vm.$el.outerHTML
      // 销毁实例并清空容器，避免内存泄漏和内容溢出
      vm.$destroy()
      this.$refs.mockContainer.innerHTML = ''
      return html
    }
  }
}
</script>

2. 优化Mock实例创建，避免内容溢出 #

不再每次创建全新的Vue实例，而是复用一个隐藏的临时容器，每次渲染后销毁实例并清空容器，既保证了mock内容的准确性，又避免了复用实例导致的DOM累积或内容溢出问题。

如果需要进一步提升性能，可以预编译TooltipFormatter的模板：

// 在data中预编译模板
data() {
  return {
    // ...
    tooltipTemplate: this.$vue.compile(this.$options.components.TooltipFormatter.template)
  }
},
methods: {
  getMockTooltipHTML(point) {
    if (!this.$refs.mockContainer) {
      const mockDiv = document.createElement('div')
      mockDiv.style.display = 'none'
      document.body.appendChild(mockDiv)
      this.$refs.mockContainer = mockDiv
    }
    // 使用预编译模板渲染
    const vm = new this.$vue({
      parent: this,
      render: this.tooltipTemplate.render,
      staticRenderFns: this.tooltipTemplate.staticRenderFns,
      propsData: { point }
    })
    vm.$mount(this.$refs.mockContainer)
    const html = vm.$el.outerHTML
    vm.$destroy()
    this.$refs.mockContainer.innerHTML = ''
    return html
  }
}

关键说明 #

• 通过将Vue组件实例绑定到Highcharts对象，实现了回调与Vue方法的直接交互，无需复杂事件传递。
• Portal目标容器动态更新，组件始终存活，保留了进度条等动画状态。
• Mock渲染复用容器，每次渲染后销毁实例，解决了内容溢出问题，同时降低了性能开销。

内容的提问来源于stack exchange，提问作者Edmundo Del Gusto