Tengo un ejemplo que replica lo que estoy haciendo en realidad. Cuando se inserta un nuevo elemento en la matriz, el contador aumenta y establece el valor en el progreso.
Para el ejemplo, preparé un JSFiddle: aquí
new Vue({
el: '#app',
data () {
return {
valueDeterminate: 0,
total: 1000,
timeOut: 0,
iteraciones: 1000
}
},
methods: {
async Click() {
var arr = [];
var sum = 0;
this.valueDeterminate = 0;
await this.forEach(this.iteraciones, async (i) => {
await this.Sleep(1);
arr.push(1);
sum++;
this.SetProgressBar(sum);
clearTimeout(this.timeOut);
})
},
SetProgressBar(num) {
if (num) {
this.valueDeterminate = Math.round(this.Map(num));
}
},
Map(value) {
return ((value - 0) * (100 - 0)) / (this.total - 0) + 0;
},
async forEach(arr, callback) {
for(let i = 0; i < arr; i++){
await callback(arr[i], i);
}
},
Sleep(milisegundos) {
return new Promise(resolve => this.timeOut = setTimeout(resolve, milisegundos));
},
}
})
Simplemente edite el valor de 'total' e 'iteraciones' (ambos deben ser iguales) y ejecute. Si el número es alto, como 1000, el progreso no tiene problemas. Pero si los valores son <= 100, el progreso no sincroniza el valor y su modelo v muestra el valor real
Parte del problema es la transición animada en la barra de progreso. Si incluye esto en el CSS, todo funciona bien:
.v-progress-linear__bar, .v-progress-linear__bar__determinate {
transition: none;
}
Si bien eso es suficiente para 'arreglarlo', no es toda la historia. Así que deshagámonos de ese truco y profundicemos un poco más ...
El siguiente problema es que está actualizando la barra de progreso con tanta frecuencia que la transición animada no tiene la oportunidad de comenzar. Cada vez que actualice el valor, comenzará de nuevo desde el ancho actual. Porque esto sucede en cada fotograma cuyo ancho 'actual' nunca sale de 0. El ancho de destino se hace cada vez más grande, pero se atasca en el primer fotograma de la animación, lo que mantiene el ancho en 0.
La razón por la que parece funcionar bien con valores grandes, como 1000, es el redondeo. Varios valores consecutivos se redondearán al mismo valor, por lo que, efectivamente, nada cambia, lo que permite que la transición comience. Pero para valores más pequeños, está actualizando el valor cada vez, por lo que la animación no puede ir más allá del primer fotograma.
Para ver el efecto del redondeo directamente, intente cambiar esta línea:
this.valueDeterminate = Math.round(this.Map(num));
a esto:
this.valueDeterminate = this.Map(num);
Asegúrese de eliminar el truco CSS que describí antes antes de ejecutarlo. Verá que la barra de progreso ahora se detiene incluso con un total de 1000. Sin el redondeo actuando como un búfer, estamos bombardeando la barra de progreso con pequeñas actualizaciones y restableciendo la transición animada.
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras