Как поместить модальный элемент в дочерний компонент, который находится под b-раскрывающимся списком, и чтобы он не отображался внутри b-раскрывающегося списка? - PullRequest
Новая
       24

Как поместить модальный элемент в дочерний компонент, который находится под b-раскрывающимся списком, и чтобы он не отображался внутри b-раскрывающегося списка?

0 голосов
/ 27 января 2020

Я делаю дочерний компонент кнопки, который открывает включенный модал в этом же компоненте. Прямо сейчас, поскольку модал вложен в элемент root (дочернего компонента), он выполняет рендеринг внутри выпадающего b родительского компонента (Bootstrap Vue). Я стремлюсь, чтобы модал оставался в дочернем компоненте, но рендерился в середине окна, как и все мои другие модалы.

Вот вызов из моего родительского компонента (который использует Pug): 

b-dropdown(right text='Reports')
  ExportItemsToPDF(:item_ids=`selectedItems`)

А вот часть из ExportItemsToPDF компонента: 

.export_items_to_pdf
  b-dropdown-item(@click.prevent='openModal()') {{buttonTitle}}
  modal(name='export_items_to_pdf' height='auto' width='70%')
    form.modal-container(@submit.prevent='submit')
      h1 TEST

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

Спасибо .

1 Ответ

0 голосов
/ 28 января 2020

Я не думаю, что вы можете сделать это без каких-либо пользовательских Javascript для манипулирования модальным. Если вы пытаетесь извлечь выгоду из общего компонента, который вы можете перетащить в другие компоненты (чтобы сохранить код DRY et c), вам придется разделить модал на его собственный компонент, а затем в родительском компоненте сделать что-то как ... 

ExportItemsToPDFModal
b-dropdown(right text='Reports')
  ExportItemsToPDFDropdownItem(:item_ids=`selectedItems`)

... так, что модал - это брат или сестра (или, возможно, выше, как тетя / дядя или двоюродная бабушка / двоюродный дядя) из b-dropdown вместо дочерний элемент.

...