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


Log in to reply
 

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