<template>
<view class="numberRoll">
<!-- 数字 -->
<view v-for="(item, index) in numberList" :key="index">
<view v-if="showNum(item)" class="numberRoll_wrap">
<view
:style="{ transform: `translate(-${50}%, -${item * 10}%)` }"
class="numberRoll_wrap-number"
>
<view v-for="(num, numIndex) in baseNum" :key="numIndex">
{{ num }}
</view>
</view>
</view>
<view v-else class="numberRoll_symbol">{{ item }}</view>
</view>
</view>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
@Component
export default class NumberRoll extends Vue {
@Prop({
type: Array,
default: [],
})
private numberList;
private baseNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
private showNum(item) {
return !isNaN(item);
}
}
</script>
<style lang="less">
.numberRoll {
display: flex;
&_wrap {
display: inline-block;
width: 21rpx;
height: 30rpx;
font-size: 30rpx;
color: #fff;
line-height: 30rpx;
text-align: center;
position: relative;
overflow: hidden;
font-weight: 600;
&-number {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease-in-out;
}
}
&_symbol {
font-family: 'AlibabaSans';
font-size: 30rpx;
color: #fff;
line-height: 30rpx;
}
}
</style>
