vue点击时怎么清除定时器

在 Vue 中清除定时器，可以通过全局变量来实现，也可以用 Vue 提供的 $destroy 钩子函数来清除定时器。

下面是两种实现方式：

1. 使用全局变量

<template>
  <div>
    <img :src="imgUrl" @click="stopAutoPlay">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: 'xxx',
      timer: null  // 定义一个全局变量保存定时器
    }
  },
  mounted() {
    this.startAutoPlay()
  },
  methods: {
    startAutoPlay() {
      this.timer = setInterval(() => {
        // 轮播逻辑
      }, 2000)
    },
    stopAutoPlay() {
      clearInterval(this.timer)  // 点击图片时清除定时器
    }
  }
}
</script>

2. 使用 $destroy 钩子函数

<template>
  <div>
    <img :src="imgUrl" @click="stopAutoPlay">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: 'xxx',
      timer: null
    }
  },
  mounted() {
    this.startAutoPlay()
  },
  methods: {
    startAutoPlay() {
      this.timer = setInterval(() => {
        // 轮播逻辑
      }, 2000)
    },
    stopAutoPlay() {
      clearInterval(this.timer)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)  // 在组件销毁之前清除定时器
  }
}
</script>

以上两种方式都可以实现点击图片时清除定时器，具体使用哪种方式可以根据实际情况来选择。