<template>
  <div
    v-for="(item, index) in numItem"
    :key="index"
    :style="{height, transition, transform: 'translateY(' + -tansY + 'px)'}"
    class="sk-flex sk-center sk-digital-item"
  >
    {{ item }}
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'

export default defineComponent({
  props: {
    transition: {
      type: String,
      default: '4s',
    },
    height: {
      type: String,
      default: '40px',
    },
    translateY: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const tansY = computed(() => props.translateY)
    const numItem = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.']
    return {
      numItem,
      tansY,
    }
  },
})
</script>

