Cómo usar Vue para implementar un botón de cuenta regresiva
Esta vez le mostraré cómo usar Vue para implementar el botón de cuenta regresiva. ¿Cuáles son las precauciones al usar Vue para implementar el botón de cuenta regresiva? El siguiente es un caso práctico, echemos un vistazo.
En el desarrollo de proyectos, a menudo nos encontramos con un botón que envía un código de verificación y tiene una cuenta regresiva de 60 segundos después de hacer clic en él. Es muy común pero también muy simple, pero al escribir este botón, hay algunos. Lugares donde debes prestar atención, lo escribiré hoy. Si tienes alguna pregunta, ¡no dudes en corregirme!
El efecto completado es el siguiente:
Para mostrar el efecto más rápido, configuré el tiempo en 5 segundos. Después de hacer clic en el botón, aparecerá una cuenta regresiva. Al mismo tiempo, no se podrá hacer clic en el botón, su estilo también cambiará y la apariencia del mouse también cambiará.
A continuación usamos el código para implementar:
{{content}}
...
datos () {
return {
contenido: 'Enviar verificación code', // Contenido mostrado en el botón
totalTime: 60 //Registra el tiempo de cuenta regresiva específico
}
},
métodos: {
countDown() {
let clock = window.setInterval(() => {
this.total--
this.content = this.total + 's y luego reenviar'
},1000)
}
}Agregue dos elementos en los datos Datos, uno se usa para registrar el tiempo y el otro se usa para contener el contenido específico del botón de cuenta regresiva. En la función de cuenta atrás, usamos el temporizador setInterval para disminuir el tiempo total en 1 cada segundo y cambiar el contenido que se muestra en el botón. La función de flecha se usa en window.setInterval porque vinculará automáticamente el this externo, por lo que no es necesario guardarlo primero.
El efecto es el siguiente:
Pero todavía hay algunos problemas con este botón:
Después de hacer clic en el botón, la cuenta atrás comienza directamente desde 59 segundos después. Falta 1 segundo. Falta el 60 en el medio
Aún puedes hacer clic durante la cuenta regresiva
La cuenta regresiva aún no se ha borrado
A continuación, debes hacerlo. Continúe mejorando la función de cuenta atrás para resolver estos problemas.
countDown () {
this.content = this.totalTime + 's y luego reenviar' //Aquí para resolver el problema de perder 60 segundos
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.totalTime + 's y luego reenviar'
if (this.totalTime < 0) { //Borrar el temporizador cuando la cuenta regresiva sea menor que 0
window.clearInterval(clock)
this.content = 'Reenviar verificación code'
this.totalTime = 60
}
},1000)
}, el código anterior resuelve el problema de 60 falta. Al mismo tiempo, cuando totalTime sea menor que 0, borre el sincronizador, restablezca el contenido del botón y restablezca totalTime a 60 para usarlo la próxima vez.
El efecto de la cuenta regresiva de 10 segundos:
Encontré un error Después de hacer clic varias veces, la velocidad de la narración inversa se vuelve más rápida. Esto se debe a que cada clic iniciará un setInterval. , y estos setIntervals reducirán el tiempo total. La solución también es muy simple: simplemente estrangúlelo, es decir, haga que el código de la función countDonw no sea ejecutable después del primer clic en el botón y espere hasta que termine la cuenta regresiva antes de poder ejecutarlo nuevamente.
datos () {
return {
contenido: 'Enviar código de verificación',
tiempo total: 10,
canClick: true //Agregar canClick
}
}
...
cuenta atrás () {
if (!this.canClick) return //Los cambios son estas dos líneas de código
this.canClick = false
this.content = this.totalTime + ' s Luego reenviar'
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.totalTime + 'Reenviar después de s'
if (this.totalTime < 0) {
window.clearInterval(clock)
this.content = 'Reenviar código de verificación'
this.totalTime = 10
this.canClick = true //Reiniciar aquí
}
},1000)
}Agregar datos de canClick. El valor predeterminado es verdadero. Si canClick es verdadero, el código en cuenta atrás se puede ejecutar. Si es falso, no funcionará. Establezca canClick en falso cada vez que se ejecute y cámbielo a verdadero solo cuando finalice la cuenta regresiva. De esta manera el problema ahora desaparece.
Eso es todo, pero también puedes ajustar el estilo:
...
.disabled{
color de fondo: #ddd;
color de borde: #ddd;
color:#57a3f3;
cursor: no permitido; // Cambio de mouse
}Efecto:
Este El botón de cuenta regresiva Es muy simple, pero todavía era muy complicado cuando lo escribí por primera vez y no conocía el concepto de limitación de funciones en ese momento.
Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.
Lectura recomendada:
Cómo usar Vue para escribir un enlace de datos bidireccional
Cómo usar Vue para implementar proxy proxy