No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Mouseover does not work on q-btn

    Help
    3
    5
    3176
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      anonimo last edited by

      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>

      1 Reply Last reply Reply Quote 0
      • A
        anonimo last edited by

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

        1 Reply Last reply Reply Quote 0
        • B
          BigAppear last edited by

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

          1 Reply Last reply Reply Quote 1
          • M
            mmakrzem last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • M
              mmakrzem last edited by

              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

              1 Reply Last reply Reply Quote 2
              • First post
                Last post