在混合器中添加组件v-on事件(@mousenter)

Question

我想做一个Vue Mixin应用类似的悬停事件和类。

现在，我将其添加到每个组件中，但更愿意将其添加到混合器中。

这是可能的吗?还是有更简单的方法来实现这一点，而不必包括@mouseenter和@mouseleave。

<div 
  @mousenter="hovering=true" 
  @mouseleave="hovering=false"
  :class="[hovering ? 'elevation-4' : 'elevation-2']">` 

我更喜欢进口这样的东西：

export default {
    data: () => ({ hovering: false }),
    mounted(){
        // something here to use mouseenter/mouseleave
    }
}

Answer 1

你可以这样做：

​

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>

​

Answer 2

您可以这样定义一个mixin：

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;
    },
  },
};

然后像这样使用它：

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>

请注意，您仍然需要手动绑定事件和类，但是您将重用这两个类的定义。