Question

我使用奥地利的SVG地图。每个省都有“标题”属性，其中包含省的名称。

[下面的代码段中提供了完整的示例]

在HTML的地图之外，我有一个段落，我想在其中显示用户单击的省名。

我该如何实现？

这是我的代码片段： https://mdbootstrap.com/snippets/jquery/marektchas/500840?view=project

Answer 1

如果您可以更改svg部分，则可以在每个path上添加一个点击事件：

<path @click="setProvince('Burgenland')" id="AT-1" title="Burgenland" class="land" d="..." />

并在脚本中添加一个方法：

methods: {
  setProvince (title) {
    this.province = title
  }
}

更新后的答案

如果您有很多省份，则可以通过选择所有mounted选择器（或类名或任何与您的情况相关的选择器）来在<path>上添加点击事件：

new Vue({
  el: '#app',
  data: {
    province: null
  },
  mounted () {
    this.addClickHandler()
  },
  methods: {
    setProvince (title) {
      this.province = title
    },
    addClickHandler () {
      let paths = this.$el.querySelectorAll('path')
      paths.forEach(el => {
        let title = el.attributes.title.value
        el.addEventListener('click', () => {
          this.setProvince(title)
        })
      })
    }
  }
});

这样就不再需要模板中的@click。
Live example here

Answer 2

您需要了解事件委托。您应该能够将事件处理程序附加到svg根目录并获取svg中任何元素的事件

https://recursive.codes/blog/post/34

https://jqfundamentals.com/chapter/events

如何使用Vue.js从SVG映射访问数据

2 个答案: