[Solved]Vue как глобально вызвать в активном интерфейсе нужный метод или событие?

1

Добрый день Владимир! Кроме вас наверное никто не сможет ответить.

Для мобильногое приложения, где использую Framework7-Vue, в Android версии пользуюсь кнопкой BackButton(hardware), которая прописана глобально для закрытия всех страниц и типа popup,sheet,…
Все работает прекрасно, но есть страницы, где отображаются данные с динамическим проваливанием в глубь, например отображение файловой структуры. Есть кнопка для возврата на уровень выше. По привычке пользователь как обычно нажимает кнопку BackButton и вместо ожидаемого покидает всю страницу или “SheetModal”. Иногда бывает, что он проваливался далеко вглубь, что раздражает, приходится нажимать на кнопку уровень выше.
Как сделать так, чтобы Framework7 запускал только в активном интерфейсе(page,popup,sheet,…) стандартный метод назовем onBackButton? Или есть другой вариант решения данной проблемы?

Для понимания проблемы прилагаю скриншоты, как это может выглядит. Если нажать BackButton, то SheetModal закроется, и заново придется выбирать, нужный файл.

1_8081_(Almaz%20GS5)%20(2)
127.0.0.1_8081_(Almaz GS5) (2).png360×640 17.4 KB
1_8081_(Almaz%20GS5)%20(3)
127.0.0.1_8081_(Almaz GS5) (3).png360×640 27.1 KB

содержимое main.js

document.addEventListener(“deviceready”, () => {
//…
document.addEventListener(‘backbutton’, BackButton_event, false);
//…
});

var TwiceClicked = 0;
const BackButton_event = function () {
//…
const timing = 1200;
const app = App.$f7;
if (TwiceClicked >= 2) {
if (cordova.platformId === ‘browser’) {
//devel
window.location.reload();
} else {
navigator.app.exitApp();
}
}
else if (app.sheet.get()) {
app.sheet.close();
}
else if (app.fab.openedEl) {
app.fab.close();
}
else if (app.calendar.get()) {
app.calendar.close();
}
else if (app.actions.get()) {
app.actions.close();
}
else if (app.panel.close()) {
//todo
}
else if (app.searchbar.get() && app.searchbar.get()[‘enabled’]) {
app.searchbar.disable();
}
else if (app.popup.get()) {
//todo check
app.popup.close();
}
else if (app.popover.get()) {
app.popover.close();
}
else if (app.view.main.history.length > 1) {
app.router.back();
}
else {
if (!app.toast.get()) {
app.toast.show({
text: ’ для выхода нажмите два раза’,
closeTimeout: timing
});
}
TwiceClicked++;
let timerID = setTimeout(() => {
TwiceClicked = 0;
}, timing);
}
};

2

А как у вас реализовано это самое приваливаете в глубь внутри этого sheet modal? Что там, view с роутером?

3

По идее нужно в это условие вставить еще проверку, вопрос только что там

5

Удалось разобраться?

6

В случае, где скриншот, при заполнении формы, в этой же странице есть компонент:

<f7-sheet ref="filesSelectCloud" :style="'height: '+ sheetHeight"><component-file-interface-select :multiple="multiple" v-model="uploadedFiles"/></f7-sheet>

пользователь нажимает кнопку прикрепить файл, который запускается через:
this.$refs.filesSelectCloud.open();

Компонент “component-file-interface-select” - это верстка [SOLVED] Возможно ли использовать Tabs в компоненте Sheet Modal?

Внутри этого компонента, при нажатии на “папку” через $store.dispatch (а там веб запросом) приходит список файлов, все результаты хранятся во Vuex. И внутри уже через $store.getters эти данные отображается в виде списка.

Идею понял, решил когда буду запускать действия BackButton_event, проверять есть ли SheetModal(с меткой во Vuex что есть проваливание глубже), если есть то запускать App.$refs.filesSelectCloud.UpperLevel_go(). Попробую, потом отпишусь.

Хотелось бы конечно простой метод, при вызове который давал бы информацию к активному интерфейсу и где я мог бы вызывать CustomEvents типа Page Events Extentions, но только не для страниц а для всех типов интерфейсов(sheet,popup).

7

Как вариант можно попробовать сделать через event bus и добавить allowBackButton переменную в $root компоненте.

event-bus.js

import Vue from 'vue';

export default new Vue();

В файле где обработчик события backbutton:

import eventBus from 'event-bus.js';
...
const BackButton_event = function() {
    eventBus.emit('backbutton');

    if (!App.allowBackButton) {
      return false;
    }

    if (TwiceClicked >= 2) {
      // ...
    }
    // ...
};

И в самом компоненте с sheet modal, добавить собственный обработчик:

import eventBus from 'path/to/event-bus.js';

...
eventBus.on('backbutton', () => {
  if (/* есть вложенные папки */) {
    self.$root.allowBackButton = false;
    // идем вверх по дереву
  } else {
    // вовзращаем основную логику
    self.$root.allowBackButton = true;
  }
});
8

Спасибо Владимир!
Воспользовался подсказкой, получилось. Почитал доки Vue Коммуникация между компонентами, не связанными иерархически. В компонентах, где есть возможность “динамичного проваливания” в глубь. Поставил контроль и логику метки, когда оно ставится когда убирается. Примечание, если закрывается без backbutton, другим способом, то нужно повесить еще управление меткой на закрывающиеся событие.

1 Like