vue 项目的 hover 延迟效果(delay)

最近有一个需求，是用鼠标经过，有一个hover效果，但是如果用原生的css hover来做，反应太灵敏了，就是效果太强了，很快，有时用户还没看清楚就消失了，所以决定搞一个延迟效果
1.vue 项目，这里使用的是onmouseover 和 onmouseleave 事件

// 这个就是要使用的hover的div元素
  <div :class="['menu ',curIndex===3?'active':'']" v-on:mouseover="mouseover(3)" v-on:mouseleave="mouseleave">
   </div>

2.在data 函数里面写

  data () {
    return {
      timer: null,
      hoverEnterTime: 300,
      hoverLeaveTime: 300,
      curIndex :0
    }
  }

3.在method 方法里面使用

  methods: {
    mouseover (index) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.curIndex = index
      }, this.hoverEnterTime)
    },
    mouseleave () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
      }, this.hoverEnterTime)
    },

  }

核心思想：其实就是用到了防抖功能，当用户鼠标悬停超过我们设置的时间，才会触发相应的hover效果，不然就会重置时间或者清除时间。