Creé ese código para desarrollar una información sobre herramientas personalizada que se cierra automáticamente después de 2 segundos desde que el usuario hace clic en un botón. Quiero que funcione solo al hacer clic, no al pasar el mouse.
Funciona bien las dos primeras veces, pero luego actúa de forma extraña cuando vuelvo a hacer clic en él.
Puedes comprobarlo aquí
<template> <div id="app"> <button @click="copyThat" class="relative-button"> copy that <div class="tooltip" v-if="copied"> copied </div> </button> </div> </template> <script> export default { data(){ return{ copied: false } }, methods: { copyThat: function (){ this.copied = true; setInterval( () => { this.copied = false; }, 2000 ) } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .relative-button{ position: relative; } .tooltip{ position: absolute; top: 130%; padding: 1rem; left: -50%; background: rgba(0,0,0,0.5); color: white; font-weight: bold; z-index: 100; width: 113px; height: 30px; border-radius: 4px; padding: 7px; text-transform: capitalize; font-weight: 400; font-size: 13px; } </style>El problema es que no borra el interval que creó, por lo que una vez que haga clic en el botón Copiar, se creará un interval nuevo y se ejecutarán varios intervalos cada 2 segundos, lo que hará que su barra de herramientas se vuelva muy extraña.
Puede usar setTimeout o window.clearInterval para borrar todo el intervalo antes de crear uno nuevo.
Use setTimeout en su lugar:
copyThat: function() { this.copied = true; setTimeout(() => { this.copied = false; }, 2000); }