[Vuejs]-Add component v-on events (@mousenter) within a mixin

by

0👍

You could do it like this:

Vue.config.devtools = false
Vue.config.productionTip = false

const myMixin = {
  data: () => ({ hovering: false }),
}

new Vue({
  el: "#app",
  mixins: [myMixin]
})
section {
  height: 200px;
  width: 200px;
}
.elevation-4 {
  background-color: red
}
.elevation-2 {
  background-color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <section 
    @mouseenter="hovering=true" 
    @mouseleave="hovering=false"
    :class="[hovering ? 'elevation-4' : 'elevation-2']">
  </section>
</div>

0👍

You can define a mixin like so:

lib/mixins/hover.js

export default {
  data() {
    return { isHovering: false };
  },
  computed: {
    klass() {
      return this.isHovering ? 'o-hoverable--on' : 'o-hoverable--off';
    },
  },
  methods: {
    onEnter() {
      this.isHovering = true;
    },
    onLeave() {
      this.isHovering = false;
    },
  },
};

And then use it like this:

index.vue

<template>
  <div :class="klass" @mouseenter="onEnter" @mouseleave="onLeave">hover me</div>
</template>

<script>
import hover from '~/lib/mixins/hover';

export default {
  mixins: [hover],
};
</script>

Note that you’ll still need to manually bind the events and the class, but you’ll get to reuse the definitions of both.

Leave a comment