Как перехватить событие наведения элемента svg в методе vue js и как объединить родное событие наведения javascript с методом vue - PullRequest
Новая
       15

Как перехватить событие наведения элемента svg в методе vue js и как объединить родное событие наведения javascript с методом vue

0 голосов
/ 05 мая 2018

Ранее я разработал проект библиотеки vuejs + d3.js + jit. В настоящее время мне нужно прикрепить функцию hover к svg-элементу d3.js, чтобы показать всплывающее диалоговое окно с информацией о наведенном элементе. Я пытался много раз, следуя некоторым инструкциям stackoverflow. Но все они не подходят для моего. Вот мой фрагмент кода. 

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

Приведенный выше код в любом случае не работает, поскольку элемент d3.js отображается при монтировании компонента vue, а синтаксический анализатор шаблона vue не может скомпилировать атрибут v-on, @mouseover.

Но следующий код работает нормально. 

allNodes.append("circle").attr("onmouseover", "console.log('test');");

Поэтому я подумал, что я бы добавил встроенную функцию javascript в метод vue, чтобы показать всплывающее диалоговое окно.

Но я не уверен, как настроить структуру всех проектов и где разместить встроенную функцию в моем проекте.

Пожалуйста, помогите мне.

Спасибо.

1 Ответ

0 голосов
/ 05 мая 2018

Вы можете использовать .on("mouseover", this.vueMethod) в своем выборе d3, где this.vueMethod определено внутри объекта methods компонента Vue. 

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ],
    todoHovered: "hover a circle"
  },
  mounted() {
    const svg = d3.select(this.$refs.chart)
      .append("svg")
        .attr("width", 400)
        .attr("height", 100);
    const circles = svg.selectAll("circle")
      .data(this.todos).enter()
      .append("circle")
        .attr("cx", 5)
        .attr("cy", (d,i) => 10 + i * 15)
        .attr("r", 5)
        .style("fill", d => d.done ? "green" : "red");
    circles.on("mouseover", this.showMessage)
  },
  methods: {
    showMessage(d) {
    	this.todoHovered = `${d.text} is ${d.done ? 'done' : 'not done'}`;
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <div ref="chart">
  </div>
  <p>
    Message: {{ todoHovered }}
  </p>
</div>
...