Vue.js + SVG Map - как оформить выбранный элемент? - PullRequest
Новая
       33

Vue.js + SVG Map - как оформить выбранный элемент?

0 голосов
/ 26 марта 2019

У меня есть карта SVG и класс .selected, который добавляет цвет к выбранной провинции: 

.selected {
  fill: brown;
}

Я не могу добавлять какие-либо методы или события непосредственно в HTML, потому что я буду использовать разные карты.

Я использую прослушиватель событий в своих методах для доступа к данным и их рендеринга в зависимости от провинции, по которой щелкнули.

Как я могу это сделать с классом .selected?Поэтому, если я щелкаю по данной провинции, он получает класс .selected, а если я щелкаю по другому, предыдущий теряет класс .selected?

Вот мой фрагмент с моим кодом: https://mdbootstrap.com/snippets/jquery/marektchas/507954

Ответы [ 2 ]

1 голос
/ 26 марта 2019

Вы можете добавить класс .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)
      })
    })
  }
}
1 голос
/ 26 марта 2019

Вы можете использовать условную привязку класса, как описано в документации 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' }

  • Поскольку вы можете просто создать SVG с помощью vue , вы можете визуализировать провинции в цикле и связать все его свойства, например, 

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

Этот путь значительно сократит вашу разметку.

...