[Resolved] v0.15.4 QFabAction Prevent Closing of QFab When Clicked



  • Good day. Is there any way to prevent closing of QFab when any of the QFabAction is clicked? I’ve tried @click.stop=method(), @click.prevent=method(), and @click.stop.prevent=method() but to no avail.

    I don’t know if this behavior is inline with Material Design specs but it might be helpful for some users to have a property that can toggle the functionality of closing the QFab on click of QFabAction since you don’t need to click the QFab everytime you want to click on a QFabAction. Thanks!



  • Done. What I did was to use the combination of @hide event and show() method of QFab. The code snippet looks like this:

    <q-fab
        ref="fab"
        color="purple"
        icon="keyboard_arrow_up"
        direction="up"
        v-model="fabOpen"
        @hide="preventFabHide()">
    
        <q-fab-action color="secondary" icon="search"/>
    </q-fab>
    ...
    methods: {
       preventFabHide () {
          this.$refs.fab.show()
       }
    }
    

    I hope it can help anyone having the same issue. One problem is that the fab won’t be hidden anymore. Thanks!



  • Can still hide the fab like this

    <q-fab
    ref=“fab”
    flat
    direction=“down”
    icon=“more_vert”
    text-color=“white”
    class=“fixed gt-sm mapv4-navmenuDesktop z-top”
    v-model=“showFab”
    @hide=“preventFabHide”>
    <q-fab-action color=“secondary” icon=“search”/>
    </q-fab>

    preventFabHide (ev:any) {
    if(ev){
    this.showFab = !this.showFab;
    }
    else{
    this.$refs.fab.show() // OR BELOW for ts
    (this.$refs.fab as Vue & { show: () => boolean }).show()
    }
    }


Log in to reply