Вопрос Как сделать обновление текста

[LUTER2]

как можна реализовать чтоб допустим при поплнении деньги плавно добавлялись и при снятии плавно списывались (знаю такая фитча есть на маджестике,новой редаге ну и на кристале)

хочу поставить на обычную редагу ну и понять как это работает

 

[mippoosedev]

VUE example:

<template>
  <span>{{ displayNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")}}</span>
</template>

<script setup>
const props = defineProps({
  number: {
    type: Number,
    required: true
  },
})

let displayNumber = $ref(0)
let interval = $ref(null)

onMounted(() => {
    displayNumber = props.number
})

watch(() => props.number, (newVal, oldVal) => {
  if (newVal === oldVal) return
  if (displayNumber === newVal) return 
  if (interval) {
      clearInterval(interval)
      interval = null
  }
  interval = setInterval(() => {
      if (displayNumber !== newVal) {
          let change = (newVal - displayNumber) / 10
          change = change > 0 ? Math.ceil(change) : Math.floor(change)
          displayNumber += change
      } else {
          clearInterval(interval)
          interval = null
      }
  }, 20)
})
</script>

<style scoped>

</style>

Credits: https://stackoverflow.com/questions/35531629/vuejs-animate-number-changes

 

[LUTER2]

VUE example:

<template>
  <span>{{ displayNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")}}</span>
</template>

<script setup>
const props = defineProps({
  number: {
    type: Number,
    required: true
  },
})

let displayNumber = $ref(0)
let interval = $ref(null)

onMounted(() => {
    displayNumber = props.number
})

watch(() => props.number, (newVal, oldVal) => {
  if (newVal === oldVal) return
  if (displayNumber === newVal) return
  if (interval) {
      clearInterval(interval)
      interval = null
  }
  interval = setInterval(() => {
      if (displayNumber !== newVal) {
          let change = (newVal - displayNumber) / 10
          change = change > 0 ? Math.ceil(change) : Math.floor(change)
          displayNumber += change
      } else {
          clearInterval(interval)
          interval = null
      }
  }, 20)
})
</script>

<style scoped>

</style>

Credits: https://stackoverflow.com/questions/35531629/vuejs-animate-number-changes

куда это пихать ха вуе не шарю

 

[mippoosedev]

куда это пихать ха вуе не шарю

Это отдельный компонент, стили накидываются так же через span
Основная логика - в вотчере(следит за изменениями значения)

 

[LUTER2]

Это отдельный компонент, стили накидываются так же через span
Основная логика - в вотчере(следит за изменениями значения)

ага непонял

 

[RageDevs]

ага непонял

Мозг включи

 

[LUTER2]

Мозг включи

агресивно

 

[ready to massacre]

агресивно

там пример выше вполне себе ок, если не получается, рекоменду вон книжку к изучению, поможет

 

[mippoosedev]

Можно ещё через transition в css сделать, но там с параметрами нужно работать. Я такое неоч люблю, когда есть вью)

 

[RageDevs]

агресивно

Не хочешь думать, плати деньги

 

[RageDevs]

Я могу сделать если что, обговорим цену - Yajiro#2553