Open a component template in a sheet modal

1

Hi

How could I open a component template in a sheet modal that would appear on the half bottom of my application ?

2

Компонент роутера может содержать только page, popup, panel или tab-content.

3

Thanks.

But when i have such definition

path: '/call/',
name: 'call',
popup: { componentUrl: './pages/call.html' }

Inside popup, it’s blank, et the pageInit event is never called.

Where should I look first ?

4

If in my component, I put a console.log in the data: function () { } of the component, I can see the log in the console. But pageInit is never triggered… I can see the content that is in the page-content section.

6

Here is what I have in the component template call.html

<template>
<div class="popup">
<div class="view">
<div class="page">
<div class="page-content">
Hello World;

</div>
</div></div>

</div>

</template>
<script>
return {
data: function () {
return {
gaugeVisible: false,
}
},
methods: {
showGauge: function () {
this.$setState({
gaugeVisible: true
})
},
},
on: {

pageInit: function (e, page) {
console.log('pageInit');
},
pageBeforeIn: function (e, page) {
console.log('page before in');
},
pageAfterIn: function (e, page) {
console.log('page after in');
},
pageBeforeOut: function (e, page) {
console.log('page before out');
},
pageAfterOut: function (e, page) {
console.log('page after out');
},
pageBeforeUnmount: function (e, page) {
console.log('page before unmount');
},
pageBeforeRemove: function (e, page) {
console.log('page before remove');
},
}

}
</script>

7

And I call this by
…
{
path: ‘/call/’,
name: ‘call’,
popup: { componentUrl: ‘./pages/call.html’ }

},
…

The popup open, I can read HelloWorld. But absolutely no event is triggered (pageInit, etc…)

I use the latest v4 release

8

pageInit => popupOpen

9

В popup будут события popup, а не page: https://framework7.io/docs/popup.html#popup-events

10

There is no page: related events on modals. Use mounted lifecycle hook instead or modal event:

<template>
  <div class="popup" @popup:open="onPopupOpen">
    ...
  </div>
</template>
<script>
  return {
    mounted: function () {
      // do something when Popup component added to DOM
    },
    methods: {
      onPopupOpen: function () {
        // do something on Popup open
      },
    }
  }
</script>
1 Like
11

Thanks. I completely missed this. I always use component but not with popup.

However, i notices someting. On this popup, i have put a button, and when I click on this button, i mapped it to “app.popup.destroy()”.

When I console log the popup instance after this, there is a “destroyed:true” in the log.

BUT : the popup stay “alive” in the DOM. On the “Elements” tab of chrome, i can see it.

How can I completery destroy it from DOM ? (using method of F7, not by using a “removeChild” or something outside F7.

I hope I am clear

Thanks

12

Вы можете удалить popup из DOM средствами DOM7, к примеру.

1 Like
13

You shouldn’t destroy routable popup manually. And .destroy() methods don’t remove anything from DOM for any components. If you want to correctly close and remove from DOM routable popup, then just call router.back() inside of it. Otherwise you can break the router.

1 Like