JS：避免鼠标事件太灵敏

<template>
  <div @mouseenter="handleEnter"
      @mouseleave="handleLeave"></div>
</template>
<script>
export default {
  data() {
     return {
       tabVisible: false,
       t: null,
     };
  },
  methods: {
     handleEnter() {
       // 避免鼠标事件太灵敏
       this.t = setTimeout(() => {
         this.tabVisible = true;
       }, 500);
     },
     handleLeave() {
       // 鼠标移出时，马上清除,避免闪烁
       clearTimeout(this.t);
       setTimeout(() => {
         this.tabVisible = false;
       }, 500);
     },
  }
}
</script>