小编Ale*_*ine的帖子

如何在vue js方法中捕获svg元素悬停事件以及如何将原生javascript悬停事件结合到vue方法

我之前开发过 vuejs + d3.js + jit 库项目。现在,我需要将悬停功能附加到 d3.js svg 元素以显示悬停元素信息的弹出对话框。我按照一些 stackoverflow 说明尝试了很多次。但所有这些都不适合我。这是我的代码片段。

allNodes.append("circle").attr("@mouseover", "console.log('test');");
allNodes.append("circle").attr(":v-on:mouseover", "console.log('dfdfd');");
Run Code Online (Sandbox Code Playgroud)

上面的代码无论如何都不起作用,因为 d3.js 元素是在挂载 vue 组件时渲染的,并且 vue 模板解析器无法编译 v-on、@mouseover 属性。

但下面的代码工作正常。

allNodes.append("circle").attr("onmouseover", "console.log('test');");
Run Code Online (Sandbox Code Playgroud)

所以我想将本机 javascript 函数附加到 vue 方法来显示弹出对话框。

但我不确定如何配置所有项目结构以及将本机函数放置在项目中的位置。

请帮我。

谢谢。

svg native mousehover d3.js vue.js

4
推荐指数
1
解决办法
2710
查看次数

标签 统计

d3.js ×1

mousehover ×1

native ×1

svg ×1

vue.js ×1