<template>
  <div>
    <number-roller
      :number="number"
      :width="6"
      class="vux-center-h"
    />
    <divider>set width dynamically</divider>
    <number-roller
      :number="number2"
      :width="length"
      class="vux-center-h"
    />
  </div>
</template>

<script>
import { NumberRoller, Divider } from '../components/_index'

export default {
  components: {
    NumberRoller,
    Divider
  },
  data () {
    return {
      number: 123765,
      number2: 88
    }
  },
  computed: {
    length () {
      return String(this.number2).length
    }
  },
  created () {
    setInterval(() => {
      this.number = 100000 + Math.round(Math.random() * 899999)
    }, 3000)
    setTimeout(() => {
      this.number2 = 333
    }, 3000)
    setTimeout(() => {
      this.number2 = 333
    }, 5000)
    setTimeout(() => {
      this.number2 = 88
    }, 8000)
  }
}
</script>

<style lang="less">
@import '../styles/center.less';
</style>
