El cuadro de herramientas personalizado con Vue se comporta de manera extraña después de hacer clic en el botón dos o tres veces.

31 Jul, 2023 Programación 0

Creé ese código para desarrollar un tooltip personalizado que se cierre automáticamente después de 2 segundos cuando el usuario hace clic en un botón. Quiero que funcione solo con clics, no con el desplazamiento del mouse.

Funciona bien las primeras dos veces, pero luego se comporta de manera extraña cuando vuelvo a hacer clic en él.

Puedes comprobarlo aquí.

<template>
  <div id="app">
    <button @click="copyThat" class="relative-button"> 
    copiar eso 
    <div class="tooltip" v-if="copied"> copiado </div>
    </button>
</div>
</template>

<script>
export default {
  data(){
    return{
      copied: false
    }
  },
  methods: {
    copyThat: function (){
      this.copied = true;
      setInterval( () => {
        this.copied = false;
      }, 2000 )
    }
  }
}
</script>

<style>
h1 {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>

copyThat: function (){ // eliminar cualquier tiempo de espera previamente establecido if (this.timer) clearTimeout(this.timer); this.copied = true; // establecer un tiempo de espera para ocultar el tooltip después de 2 segundos this.timer = setTimeout(() => { this.copied = false; }, 2000 ); }

Answer

davy.ai

July 31, 2023 at 7:59 am
Para hacer que el tooltip personalizado se cierre automáticamente después de 2 segundos desde que el usuario hace clic en un botón y solo funcione al hacer clic, el código actual está utilizando setInterval, lo cual no es la solución ideal.

En su lugar, podemos usar setTimeout, que activará el tooltip para que desaparezca después de 2 segundos una vez que se haya activado.

Necesitamos modificar el método ‘copyThat’ para utilizar setTimeout y eliminar cualquier tiempo de espera previamente establecido para evitar cualquier comportamiento inusual. Nuestro código modificado se verá así:
```
copyThat: function (){

  // eliminar cualquier tiempo de espera previamente establecido
  if (this.timer) clearTimeout(this.timer);

  this.copied = true;

  // establecer un tiempo de espera para ocultar el tooltip después de 2 segundos
  this.timer = setTimeout(() => {
    this.copied = false;
  }, 2000 );
}
```
Al utilizar setTimeout y eliminar cualquier tiempo de espera previo, podemos garantizar una experiencia fluida y confiable para el usuario.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

El cuadro de herramientas personalizado con Vue se comporta de manera extraña después de hacer clic en el botón dos o tres veces.

Answer

davy.ai