37 lines
736 B
Vue
37 lines
736 B
Vue
<script setup>
|
|
const modelValue = ref(10)
|
|
const bufferValue = ref(20)
|
|
const interval = ref()
|
|
|
|
const startBuffer = () => {
|
|
clearInterval(interval.value)
|
|
interval.value = setInterval(() => {
|
|
modelValue.value += Math.random() * (15 - 5) + 5
|
|
bufferValue.value += Math.random() * (15 - 5) + 6
|
|
}, 2000)
|
|
}
|
|
|
|
onMounted(startBuffer)
|
|
onBeforeUnmount(() => {
|
|
clearInterval(interval.value)
|
|
})
|
|
watch(modelValue, () => {
|
|
if (modelValue.value < 100)
|
|
return false
|
|
modelValue.value = 0
|
|
bufferValue.value = 10
|
|
startBuffer()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-y">
|
|
<VProgressLinear
|
|
v-model="modelValue"
|
|
color="primary"
|
|
height="8"
|
|
:buffer-value="bufferValue"
|
|
/>
|
|
</div>
|
|
</template>
|