vega-lite 和 vuejs - 關閉工具提示

Question

我正在 Vue.js SPA 中使用 vega-lite 繪制條形圖。 主數據層的編碼部分如下所示：

encoding: {
    x: {field: 'word', type: 'ordinal', sort: '-count'},
    y: {field: 'count', type: 'quantitative'},
    tooltip: [{field: 'word'}, {field: 'count'}, {field: 'doc_count'}]
  }

…在更新圖表的 Vue 組件方法中，我有這個：

vegaEmbed('#vis', spec)
   .then(({_spec, view}) => {
     view.addEventListener('click', function (event, item) {
       if (item) {  
          vueComponent.onWordClicked(item.datum.word);
          }
        })
      })

......為了完成所有這些，稱之為：

onWordClicked(word) {
  this.$router.push({path: 'words', params: {word: word}});
}

所有這一切都完全按照我的預期工作：您在一個條形圖上 hover，顯示一個工具提示，您單擊該條形圖，您將被導航到 SPA 中的另一條路線。

但是……工具提示會一直顯示在屏幕上，除非您導航回圖表頁面並在條形圖上顯示 hover，在這種情況下，可以重新調用工具提示，然后在鼠標移出時將其關閉。

當 Vue 路徑發生變化時，關於如何使工具提示 go 消失的任何想法？ 我嘗試過使用view.tooltip(...)方法，但懷疑這太過分了（我對默認的工具提示很滿意），甚至可能無法解決我的問題。

謝謝。

Answer 1

因此，當路由更改時，觸發工具提示的組件會被不同的組件替換。 你的組件的beforeDestroy和destroyed方法將被調用，你可以掛鈎並清理任何應該清理的東西。

destroyed() { 
    // close the any open vega views. (dont know the specific of vega-embed)
}

如果一個組件清除了它對銷毀的所有副作用，則可以將其稱為行為良好的組件。 副作用可能是已設置的超時和間隔、已打開的彈出窗口和對話框等等。 如果您希望能夠進行清理，則需要保存句柄，以便稍后關閉它們。 我將演示一個表現良好的時鍾組件：

Vue.component("clock", {
    template: `
    <div>{{time}}</div>
    
`,
    data() {
        return {
            time: null
        }
    },
    mounted() {
        // save the handle this.interval so we can clear it later on.
        this.interval = setInterval(() => {
            var d = new Date;
            this.time = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
        }, 750);
    },
    destroyed() {
        clearInterval(this.interval);
    }

});