问题描述
我正在 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'}]
}
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}});
}
所有这些都完全按照我的预期工作:您将鼠标悬停在一个栏上,显示工具提示,单击该栏,然后您将导航到 SPA 中的另一条路线。
但是……工具提示会一直显示在屏幕上,除非您导航回图表页面并将鼠标悬停在条形上,在这种情况下,工具提示可以重新调用,然后在您移开鼠标时关闭。
关于如何在 Vue 路径更改时使工具提示消失的任何想法?我曾尝试使用 view.tooltip(...)
方法,但怀疑这太过分了(我对默认工具提示很满意),甚至可能无法解决我的问题。
谢谢。
解决方法
因此,当路由更改时,触发工具提示的组件将替换为不同的组件。您的组件的 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);
}
});