Debido a las necesidades del proyecto, hoy hice algo digital con desplazamiento que necesita un borde. Encontré algunos complementos de Vue, pero no satisficieron mis necesidades, así que escribamos uno a mano. Primero cree un
archivo count-flop.
<template>
<div class="count-flop">
<div :class="item!='.'?'count-flop-box':'count-flop-point'" v-for="(item, index) in value"
:key="index">
<div v-if="item!='.' && item!='-'" class="count-flop-content" :class="['rolling_' + item]">
<div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{
{
item2}}
</div>
</div>
<div v-else-if="item=='-'" class="count-flop-content">-</div>
<div v-else class="count-flop-content">.</div>
</div>
</div>
</template>
<script>
export default {
name: "countFlop",
props: ["number"],
data() {
return {
value: [],
numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
};
},
watch: {
number() {
this.value = this.number.toString().split("");
},
},
mounted() {
this.value = this.number.toString().split("");
},
};
</script>
<style scoped>
.count-flop {
display: flex;
justify-content: space-between;
height: 5vh;
line-height: 4.3vh;
font-size: 1.7rem;
color: #4898f1;
font-weight: bold;
text-align: center;
color: aqua;
width: 77%;
margin: 0 auto;
}
.count-flop > div {
position: relative;
display: inline-block;
overflow: hidden;
height: 100%;
}
.count-flop-box {
width: 17%;
border: 1px solid rgba(72, 152, 241, 0.3);
box-shadow: inset 0 0 0.6rem #69b1ff;
border: 2px solid #66bef4;
margin: 0.15vw;
}
.count-flop-point {
margin-right: 5px;
width: 10px;
}
.count-flop-content {
font-family: MicrosoftYaHei-Bold;
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
animation-fill-mode: forwards !important;
}
.rolling_0 {
animation: rolling_0 2.1s ease;
}
@keyframes rolling_0 {
from {
transform: translateY(-90%);
}
to {
transform: translateY(0);
}
}
.rolling_1 {
animation: rolling_1 3s ease;
}
@keyframes rolling_1 {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
.rolling_2 {
animation: rolling_2 2.1s ease;
}
@keyframes rolling_2 {
from {
transform: translateY(0);
}
to {
transform: translateY(-20%);
}
}
.rolling_3 {
animation: rolling_3 3s ease;
}
@keyframes rolling_3 {
from {
transform: translateY(0);
}
to {
transform: translateY(-30%);
}
}
.rolling_4 {
animation: rolling_4 2.1s ease;
}
@keyframes rolling_4 {
from {
transform: translateY(0);
}
to {
transform: translateY(-40%);
}
}
.rolling_5 {
animation: rolling_5 3s ease;
}
@keyframes rolling_5 {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.rolling_6 {
animation: rolling_6 2.1s ease;
}
@keyframes rolling_6 {
from {
transform: translateY(0);
}
to {
transform: translateY(-60%);
}
}
.rolling_7 {
animation: rolling_7 3.1s ease;
}
@keyframes rolling_7 {
from {
transform: translateY(0);
}
to {
transform: translateY(-70%);
}
}
.rolling_8 {
animation: rolling_8 2.1s ease;
}
@keyframes rolling_8 {
from {
transform: translateY(0);
}
to {
transform: translateY(-80%);
}
}
.rolling_9 {
animation: rolling_9 3.6s ease;
}
@keyframes rolling_9 {
from {
transform: translateY(0);
}
to {
transform: translateY(-90%);
}
}
</style>
Luego consúltelo en la página usada.
<countFlop number="410" />