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>