Динамическая загрузка интерактивных SVG в проект Vue.js - PullRequest
0 голосов
/ 17 октября 2018

У меня есть старый проект, построенный несколько лет назад с помощью спагетти-кода jQuery, который я хотел бы обновить для использования инфраструктуры JS (в основном по обычным причинам: лучшая масштабируемость, лучшее управление состоянием, более чистый / более обслуживаемый код и т. Д.)).Я нахожу Vue.js особенно интригующим.

Проект позволяет пользователю динамически загружать любой из большого количества файлов .svg из каталога на сервере в DOM, а затем взаимодействовать с ними (в основном щелкая, чтобы изменитьцвета заливки / линии отдельных элементов пути, обработанные jQuery плюс плагин ).

После некоторых исследований и экспериментов я не нашел простого способа сделать это с помощью Vue--насколько я могу судить, мне нужно было бы вручную отредактировать каждый файл .svg, чтобы разместить (много) привязок на месте, чтобы позволить отдельным частям .svg иметь интерактивность.Это проблема, связанная с большим количеством файлов и необходимостью быстрого добавления новых.

Мой смутный вопрос (извините): кто-нибудь может указать мне на лучшее решение?(Среда, более подходящая для этого? Способ в Vue для репликации такого рода интерактивности с простым .svg? Способ автоматизации изменения файлов .svg, чтобы иметь привязки Vue к их произвольным числам / типам элементов svg?)

Спасибо -

1 Ответ

0 голосов
/ 17 октября 2018

Самый простой способ добавить интерактивность в Vue - это преобразовать их в компоненты
, но этот не будет работать в вашей ситуации, потому что svg загружаются пользователями.

Поэтому вам нужно найти или написать компонент, который добавляет эту функцию в ваше приложение.

Для вдохновения посмотрите на https://github.com/seiyable/vue-simple-svg.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...