Добрый день Владимир!
Есть два вопроса по боковому правому панели.
Как сделать, чтобы у каждой страницы динамично менять содержимое правой панели? Хочу контролировать через v-model данные внутри панели.
B как сделать так, если у страницы есть содержимое в правой панели, автоматически активировалась параметр swipe=‘both’ ?
Страниц очень много в данный момент около 72, 30 из них имеет боковую панель, дальше будет больше. Есть простой способ, одним малой кровью сделать это, в предыдущей версии F7/1.6 делал, через атрибут
Добрый день Владимир! По первому вопросу. У меня много страниц, где есть список/реестр каких то объектов. При нажатии иконки фильтра или swipe открывается содержимое правой панели, где указаны параметры для фильтрации. Некоторые простые, некоторые наборы фильтров содержат выпадающие списки, и при выборе список(в mainView) должен реагировать на изменение фильтра.
В первой версии F7 я пользовался, тем что заменял внутренность правой панели через, примерно так: $$('#panelRight').html(content)
внутри контента было много onclick/onchange событий.
Сейчас использую Vue и хотелось, чтобы содержимое правой панели контролировать через один и тот же компонент, или же пробрасывать данные через v-model.
Получилось, в файле(содержимой правой панели) './somewhere/some-page-panel.vue'
вызываю нужный метод через this.$f7.views.main.router.currentRoute.route.component.methods.RequiredMethod(Params)
поторопился, для теста написал метод с выводом в консоль, при использовании Vue теряется this контекст. Те же самые грабли как раньше писал та же самая проблема. Изменения буду отлавливать через EventBus.
Так нельзя, ибо this.$f7.views.main.router.currentRoute.route.component это всего лишь объект с параметрами, а не инициализированный Vue компонент, поэтому никакого контекста там и не будет.
Можно тогда генерировать компонент динамически вроде:
// страница в которой нужна своя панель
export default {
// ...
mounted() {
// контекст данной траницы
const self = this;
// устанавливаем компонент в панель
const rightPanelComponent = {
template: `
<f7-page>...</f7-page>
`,
methods: {
someMethod() {
this // -> контекст компонента правой панели
self // -> конекст этой страницы
}
}
};
self.$root.rightPanelComponent = rightPanelComponent;
},
beforeDestroy() {
// убираем компонент из панели
this.$root.rightPanelComponent = null;
},
}
Если у SS параметр openIn: 'page' (по умлочанию) то чтобы был родительский View (f7-view). Если openIn не page, то можно просто передать парметром главный view:
Проблему решил, через setTimeout или setImmediate если использовать hook created. В f7-list поставил проверку на v-if=“show”, потом в hook created, выставляю this.show=true. Или в hook mountedthis.show=true.
<template>
<f7-panel right reveal>
<f7-view id="right">
<!--<component v-if="$root.rightPanelComponent" :is="$root.rightPanelComponent" v-model="$root.rightPanelInfo"/>-->
<f7-page>
<!--<component v-if="$root.rightPanelComponent" :is="$root.rightPanelComponent" v-model="$root.rightPanelInfo"/>-->
<f7-list v-if="show">
<!-- With back on select -->
<f7-list-item smart-select :smart-select-params="{ closeOnSelect: true }" title="Mac or Windows">
<select name="mac-windows">
<option value="mac">Mac</option>
<option value="windows">Windows</option>
</select>
</f7-list-item>
</f7-list>
</f7-page>
</f7-view>
</f7-panel>
</template>
<script>
export default {
components: {},
name: 'panel-right',
data() {
return {
show: false
}
},
created: function () {
setImmediate(() => {
this.show = true;
});
}
}
</script>
p.s. И еще заметил, что компоненты f7-view и f7-page нельзя использовать раздельно в разных компонентах. Должны всегда следовать друг за другом.