vue 中延迟配合套餐

最新推荐文章于 2025-06-11 16:00:49 发布

原创最新推荐文章于 2025-06-11 16:00:49 发布 · 300 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #vue.js

本文探讨如何利用setTimeout在项目中创建延迟显示和隐藏的效果，以提升用户体验。通过示例代码展示了在鼠标移入和移出时如何控制元素的显示和隐藏，并强调了使用setTimeout和clearInterval来管理定时器的重要性。

项目中，我们经常会遇到一些为了增加体验效果，鼠标划入划通过延迟执行来操作的逻辑

其实该功能主要是怎么合理的使用setTimeout这个定时器，所有下面的代码主要围绕着这个定时器来进行功能的编写

上代码：

<template>
  <div>
    <span
      class="i-images-item-icon"
      @mouseover="mouseOver()"
      @mouseleave="mouseLeave()"
    >
      延迟出现消失功能
    </span>
    <div
      class="i-images-item-popover"
      v-show="openShow"
      @mouseover="imgMouseOver()"
      @mouseleave="imgMouseLeave()"
    ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      openShow: false,
      timer: null,
      timerLeave: null
    };
  },
  mounted() {},
  methods: {
    mouseOver(val) {
      console.log("移入");
      this.mouseOvertimer = setTimeout(() => {
        this.openShow = true;
      }, 500);
      clearInterval(this.mouseLeavetimer);
    },
    // 鼠标移出
    mouseLeave(val) {
      console.log("移出");
      clearInterval(this.mouseOvertimer);
      this.mouseLeavetimer = setTimeout(() => {
        this.openShow = false;
      }, 500);
    },
    //----------------放大图鼠标移动事件
    imgMouseOver() {
      clearInterval(this.mouseLeavetimer);
    },
    imgMouseLeave() {
      clearInterval(this.mouseOvertimer);
      this.mouseLeavetimer = setTimeout(() => {
        this.openShow = false;
      }, 200);
    }
  }
};
</script>
<style scoped>
.i-images-item-popover {
  width: 200px;
  height: 200px;
  background-color: pink;
}
</style>

项目中，当我们使用了延时器以后一定要及时用（clearInterval() ）方法清理延时器