Mouseover does not work on q-btn



  • I’m making a small customization of q-btn for my personal use and I need to use the mouseover event, but for some reason it does not work on q-btn, any suggestions?

    <template>
    <q-btn
    round
    class=“btnWave”
    :style="{
    ‘border’: border,
    ‘color’: color,
    ‘background-color’: color
    }"
    @mouseover=“teste($event)”
    >
    <icon :local.boolean=“true” name=“mah-ambulance”/>
    </q-btn>
    </template>

    <script>
    import css from ‘…/assets/js/cssDefault.js’
    import {
    QBtn
    } from ‘quasar’
    import Icon from ‘./icon.vue’
    export default{
    components: {
    QBtn,
    Icon
    },
    props: {
    big: {
    type: Boolean(),
    required: false,
    default: false
    },
    small: {
    type: Boolean(),
    required: false,
    default: false
    },
    color: {
    type: String(),
    required: true,
    default: css.color.primary
    },
    bgColor: {
    type: String(),
    required: true,
    default: css.color.secondary
    }
    },
    mounted: function () {
    this.border = ($(’.btnWave’).width() / 2) + ‘px ’ + this.bgColor + ’ solid!important’
    },
    data: function () {
    return {
    border: ‘0px ’ + this.bgColor + ’ solid!important’
    }
    },
    methods: {
    teste (event) {
    console.log(‘over’)
    /* $(event.target).addClass(‘hover’)
    $(’.hover’).css({
    borderWidth: ‘1px’,
    color: this.bgColor
    }) */
    }
    }
    }
    </script>

    <style lang=“stylus”>
    @import ‘~src/themes/app.variables.styl’;
    .btnWave{
    position: relative;
    cursor: default;
    transition: border 0.3s ease, color 0.5s ease ;
    }
    .btnWave>.q-btn-inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    </style>



  • solved with jquery, if you have any suggestion with vue send



  • Please format your code (4 spaces before each line), it’s unreadable



  • Does anyone have suggestions on how to get mouseover and mouseout working on q-btn objects? Those events do not get fired at all. I don’t want to include jQuery just to solve this problem.



  • Thanks Razvan Stoenescu, The solution to the problem is to use @mouseover.native
    see: https://vuejs.org/v2/guide/migration.html#Listening-for-Native-Events-on-Components-with-v-on-changed


Log in to reply
 

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