How to trigger an event at the end of q-slide-transition



  • I need an element that is a custom dropdown inside a menu. I tried first with q-popover, but due to the fact that it uses position fixed to position the popover it breaks when scrolling the page.

    After that I’m using a custom div with position absolute to fulfill my purposes, this div receives animation when opening / closing with q-slide-transition.

    When closing the popover disappears abruptly due to the use of v-if, so does v-show.

    As an attempt to solve I used an external div, but as I already imagined the popover that is div parent does not disappear alone, and if I put the v-if in it will happen the same. What I thought was triggered an event when the q-slide-transition animation was done to close the parent div at the right time, but I did not find any such event for q-slide-transition.

    Any suggestion?

    The code is as follows:

    <template>
    <div class=“col-auto” style=“border: 1px red solid;”>
    <q-btn :id="_uid" class=“dropBtn no-shadow” @click=“toggleVisibility”>
    <q-icon name=""/>
    <div class=“dropPopover z-absolute bg-primary”>
    <q-slide-transition>
    <div v-if=“visible”>
    <l-widget v-for=“i in 3” :widget="{}"/>
    </div>
    </q-slide-transition>
    </div>
    </q-btn>
    </div>
    </template>

    <script>
    import {
    QBtn,
    QIcon,
    QSlideTransition
    } from 'quasar’
    import LWidget from './widget’
    export default {
    components: {
    QBtn,
    QIcon,
    LWidget,
    QSlideTransition
    },
    data: function () {
    return {
    visible: false
    }
    },
    methods: {
    toggleVisibility: function () {
    this.visible = !this.visible
    }
    }
    }
    </script>

    <style lang=“stylus”>
    @import ‘~src/themes/app.variables.styl’;
    .row,
    .dropBtn,
    .dropBtn .q-btn-inner{
    overflow: visible!important;
    }
    .dropBtn{
    border: 1px $secondary solid;
    border-radius: 0!important;
    padding: 0!important;
    width: 72px;
    margin-top: 2px;
    position: relative;
    }
    .dropPopover{
    border: 1px $secondary solid;
    padding: 4px 14px;
    max-height: 250px!important;
    min-width: 320px!important;
    width: 320px!important;
    max-width: 320px!important;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute!important;
    top: 34px;
    right: -1px;
    }
    </style>


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.