Как закрыть модальное окно nativescript после нескольких переходов?

Открывается модальное окно с несколькими страницами. Для навигации я использую покадровую навигацию. На каждой странице есть кнопка закрытия, нажатие на которую закрывает модальное окно.

Сейчас я передаю this.$modal в качестве свойства каждой странице, что создает длинную цепочку передачи свойств, и на каждой странице я просто использую this.modal.close(), где this.modal - свойство компонента, которое ссылается на this.$modal первой страницы.

Мне было интересно, есть ли лучший способ, например, получить доступ к самому верхнему открытому модальному окну и закрыть его.

Я использую nativescript-vue и встроенный модальные окна < / а>

Обратите внимание, что у меня есть несколько модальных окон в других частях моего приложения. есть только тот, в котором есть навигация.


nativescript vue.js nativescript-vue
person yukashima huksay    schedule 11.10.2019    source источник
comment
Это. $ Modal уже зарегистрирован глобально?   -  person Dev.DY    schedule 11.10.2019
comment
@ Dev.DY нет. в каждом основном компоненте модального окна. this. $ modal существует.   -  person yukashima huksay    schedule 11.10.2019
comment
Вы предложили решение, зарегистрировав $ modal global. Пожалуйста, проверьте свои ответы.   -  person Dev.DY    schedule 11.10.2019

Ответы (2)


arrow_upward
2
arrow_downward

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

person TomG    schedule 11.10.2019
comment
Я считаю, что это неприятный запах, поскольку модальная ссылка на самом деле не является «состоянием» или данными. Я не думаю, что это принадлежит vuex. - person yukashima huksay; 11.10.2019
comment
Это не обязательно должны быть данные, скорее глобальная ссылка, может быть лучшим выбором, если вы уже используете Vuex. Или вы можете использовать EventBus. - person Manoj; 11.10.2019
comment
@Manoj Я слышал, что vuex - это место для глобального состояния, а не для глобальной ссылки. - person yukashima huksay; 11.10.2019
comment
На мой взгляд, не помешает сохранить там ссылку и очистить ее позже, чем передавать по длинной цепочке реквизитов. Также альтернативой может быть EventBus для запуска глобального события и обработки действия закрытия. - person Manoj; 11.10.2019

arrow_upward
1
arrow_downward

  1. Отсоединить модальный компонент от плагина.
const modalDialog = {
  install (Vue, options = {}) {
     // ...
  }
}

Vue.use(modalDialog)
  1. Обозначьте прототип Vue для плагина.
const modalDialog = {
  install (Vue, options = {}) {
     Vue.prototype.$modal = {
       show () {
         // ...
       },
       hide () {
         // ..
       }
     }
  }
}

Vue.use(modalDialog)
  1. this.$modal доступен из всех компонентов.
this.$modal.show() // or hide()
person Dev.DY    schedule 11.10.2019
comment
Каким бы хорошим ни был этот ответ, он не совсем вписывается в контекст модальных окон nativescript. Извините, я думаю, мне следовало прояснить ситуацию в своем вопросе. Я буду сейчас. - person yukashima huksay; 11.10.2019