Vue手写好看的滚动数字插件

因项目需求，今天做了一个滚动数字的东西，需要有边框，找了几个vue的插件，但是不满足自己的需求，于是手写一个吧

先创建一个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>

然后在用到的页面去引用

<countFlop number="410" />