Модальное окно на vue.js в готовый проект на битрикс?

Question

[DmitryNs]

Здравствуйте! Сделал модальное окно на vue.js: есть кнопка вызова модалки, по клику вызывается окно. Хочу внедрить его на готовый сайт на битриксе, но немного не понимаю логики. По сути вопроса два:
1. Если все генерируется в #app, то каким образом можно разместить несколько #app на одной странице, потому что кнопок вызова модального окна может быть несколько на одной странице.
2. Возможно ли в это модальное окно вставить битриксовую форму связи?

Answer 1

[Андрей Хохлов]

Мы используем Vue для реализации отдельных компонентов, в том числе и на "традиционных" сайтах.
Можно и с модальным окном (полноценным, с portal-vue и т.д.). Упрощённый пример:

import Vue from 'vue';
import Modal from '@/scripts/vue/components/Modal.vue';

// Находим элемент-компонент
// Скорее всего тут будет не id, а что-то вроде селектора по классу js-some-thing и т.д.
const el = document.getElementById('some-id');

// Создаём элемент для vue-компонента
// И помещаем его внутрь
// Не обязательно, но так удобно потом "прибираться"
const mountingPoint = document.createElement('div');
el.appendChild(mountingPoint);

// Создаём инстанс vue, монтируем его в наш элемент
let modal = new Vue({
  el: mountingPoint,
  render(h) {
    // А вот и модалка
    return h(Modal);
  },
});

Соответственно можно передавать props, вкладывать другие компоненты в модалку, изменять дата, слушать события и т.д. и т.п.
Подробнее про рендер-функции https://ru.vuejs.org/v2/guide/render-function.html

Когда нужно прибраться за собой:

modal.$destroy();
  modal.$el.parentElement.removeChild(modal.$el);
  modal = null;

Answer 2

[nvdfxx]

Как вариант - не совать целый фреймворк туда, где можно парой строк обычного жс обойтись для показа модального окна

Comments

[DmitryNs]

понимаю дичь, но такая вот задача переписывать постепенно элементы

[Антон]

DmitryNs, не те вы элементы переписываете. вуе для других задач, а здесь можно тупо js обойтись

[Антон]

DmitryNs, +

1. Если все генерируется в #app, то каким образом можно разместить несколько #app на одной странице, потому что кнопок вызова модального окна может быть несколько на одной странице.

Непонятно, зачем вам какие то несколько апп, когда достаточно сделать модалку один раз и подгружать туда все необходимое в одну единственную посредством аякса?

[Александр Маджугин]

Антон, можно даже без js обойтись.

[Антон]

Александр Маджугин, цсс таргет? вот фу вообще

[Александр Маджугин]

Антон, но тем не менее можно.

Answer 3

[Александр]

Я только начинаю, но ...
1. #app в переводе в DOM это ID. Он может быть только уникальным (единственным).
2. Сделайте #app1, #app2, #app3,...
3. С моим плохим знанием иностранного языка вроде пример подходит: https://medium.com/@disjfa/using-vue-js-in-existin...

Comments

[Александр]

Наврал немного с 2 пунктом:
#app можно оставить единственным, но подгружать контент модального окна динамическими компонентами.

[DmitryNs]

Александр, у меня просто кнопка вызова окна генерируется в #app и я не совсем понимаю, как сделать если я хочу ее и в хедер и в футер.

[Александр]

DmitryNs,
Только в теории ))) ... без глубокого анализа
1. #app1 и #app2. Пишем html страницу уже с кнопками и готовыми модальными окнами. Как только кнопку нажимают окно отображается с уже готовым vue. Минус подобного подхода если захотите 100 кнопок - все 100 микро-vue приложений будут висеть на странице. Подозреваю тормоза.
2. #app. Не уверен. Пишем html страницу с кнопками (кнопками вызывается модальное окно) и Одним модальным окном. В этом модальном окне будет загружаться динамический компонент, НО не знаю как передать параметр, какая кнопка нажата из вне vue. еще подобный вопрос не рассматривал.

[Александр]

Александр, у меня просто кнопка вызова окна генерируется в #app и я не совсем понимаю, как сделать если я хочу ее и в хедер и в футер.

И опять теория )))
1. Если кнопка генерируется vue. Создать в нужных местах #app1, #app2, #app3,... в которые загружать общий компонент CLK_App (Кнопка) с общей базой компонентов. Как то проверить из какого DOM родителя была нажата и на основании переменной загрузить динамический компонент в модальное окно.