Vue.js + SVG Map - 如何设置所选项目的样式？答案

【问题标题】：Vue.js + SVG Map - how to style selected item?Vue.js + SVG Map - 如何设置所选项目的样式？
【发布时间】：2019-03-26 09:21:09
【问题描述】：

我的 SVG 地图和 .selected 类为所选省份添加颜色：

.selected {
  fill: brown;
}

我不能直接向 HTML 添加任何方法或事件，因为我会使用不同的地图。

我在我的方法中使用事件监听器来访问数据并根据点击的省份呈现它。

如何使用 .selected 类来做到这一点？所以如果我点击给定的省份，它会得到一个 .selected 类，如果我点击另一个，前一个会失去 .selected 类？

这是我的 sn-p 代码：https://mdbootstrap.com/snippets/jquery/marektchas/507954

【问题讨论】：

标签： javascript vue.js svg vuejs2 dom-events

【解决方案1】：

您可以通过编程方式添加.selected 类。

首先添加一个新方法来移除所有路径上的类，然后在点击时为选定元素添加类：

methods: {

  removeSelection (paths) {
    paths.forEach(el => el.classList.remove("selected")) 
  },

  addClickHandler() {
    let paths = this.$el.querySelectorAll('path')
    paths.forEach(el => {
      let id = el.attributes.id.value
      el.addEventListener('click', () => {
        this.province = this.provinces.find(province => province.id == id)

        this.removeSelection(paths)
        el.classList.add("selected")

        // Animation
        this.isActive = true
        setTimeout(() => { this.isActive = false }, 200)
      })
    })
  }
}

【讨论】：

【解决方案2】：

您可以使用 Class & Style Bindings 下的 vue.js 文档中所述的条件类绑定

在你的情况下，这可能看起来像

<path d="...snip..."
   id="AL" name="Albania" :class="{selected: province.id == 'AL'}">
</path>

由于这会迫使您添加每个省的比较，我建议您动态渲染 SVG：

将 SVG 路径添加到省份数据，例如{ id: 'LT', name: 'Lithuania', vat: 21, path='M707.9 ... 0.5z' }

由于you can simply create SVG using vue，您可以在loop 中渲染省份并绑定它的所有属性，例如

<path v-for="p in provinces" :key="p.id"
    :d="p.path"
    :id="p.id" 
    :name="p.name" 
    :class="{selected: province.id == p.id}">

这样做会大大缩小您的标记。

【讨论】：