search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.77k stars 3.5k forks source link

Allow passing props for keep-alive on carousel/stepper/tab-panel #8190

Closed rulrok closed 3 years ago

rulrok commented 3 years ago

Is your feature request related to a problem? Please describe.

I was designing a carousel feature which only needed images and I used keep-alive to avoid re-loading the images over and over again on each step.

Now I have a carousel which mixes images and youtube videos which is controlled by vue-youtube to easily interact with the video's api to play/pause and etc.

This component is being buggy on keep-alive mode of q-carousel. If I don't use keep-alive, the vue-youtube works as I need to be destroyed and so on, but then the images get being reloaded.

Describe the solution you'd like I'd like to be able to specify the panel's I'd like to include/exclude through vue's keep-alive props which could specify the panel names used by the v-model of the components.

So

:keep-alive={exclude: [...], include: [...], max: 10}

I think it can be done as today it only checks for the binarity of the property on the mixin responsible for its behaviour. https://github.com/quasarframework/quasar/blob/dev/ui/src/mixins/panel.js

rulrok commented 3 years ago

Just to comment another inconvenience I'm having with the youtube component and the carousel: Either with or without keepalive, the carousel slide destroys the content of the displayed slide, so each time I come back to a youtube video slide, the dynamically rendered iframe element is re-rendered by the youtube-vue component causing a minor annoying flicker on the screen because the carouse never keeps more than one slide at once as I can see.

rstoenescu commented 3 years ago

Enhancement will be available in Quasar v1.14.8