95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
|
|
|||
|
|
<template>
|
|||
|
|
<ul class="fp-box">
|
|||
|
|
<!-- 默认进来是7位，超过自动加 -->
|
|||
|
|
<li ref="lis" v-for="i in countStr.length > 5 ? countStr.length : 5" :key="i" :class="bg">
|
|||
|
|
<!-- 每列中的10行数字 -->
|
|||
|
|
<span v-for="num in 10" :key="num">
|
|||
|
|
<span class="num-wrap">{{ num - 1 }}</span>
|
|||
|
|
</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import { onMounted, ref, watch } from "vue";
|
|||
|
|
const props = defineProps({
|
|||
|
|
count: Number,
|
|||
|
|
len: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 7
|
|||
|
|
},
|
|||
|
|
bg: String
|
|||
|
|
});
|
|||
|
|
const lis = ref();
|
|||
|
|
const list = ref([]);
|
|||
|
|
const countStr = ref(""); // 需要展示的数字
|
|||
|
|
const numberArr = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); // 固定每列中的19行数字
|
|||
|
|
const numStr = ref(""); // 需要展示的数字字符串
|
|||
|
|
const numArr = ref([0, 0, 0, 0, 0, 0, 0]); // 默认展示7个数字数组
|
|||
|
|
watch(
|
|||
|
|
() => props.count,
|
|||
|
|
(val) => {
|
|||
|
|
let str = val.toString();
|
|||
|
|
let num = 0;
|
|||
|
|
if (str.length < props.len) num = props.len - str.length;
|
|||
|
|
for (let i = 0; i < num; i++) {
|
|||
|
|
str = "0" + str;
|
|||
|
|
}
|
|||
|
|
countStr.value = str;
|
|||
|
|
initNumCard();
|
|||
|
|
},
|
|||
|
|
{ immediate: true, deep: true }
|
|||
|
|
);
|
|||
|
|
onMounted(() => {
|
|||
|
|
initNumCard();
|
|||
|
|
});
|
|||
|
|
function initNumCard() {
|
|||
|
|
numStr.value = countStr.value;
|
|||
|
|
numArr.value = numStr.value.split("");
|
|||
|
|
const numArrlen = numArr.value.length;
|
|||
|
|
// 展示数字的处理，不够7位前面补0
|
|||
|
|
// 默认进来是7位，超过自动加
|
|||
|
|
for (
|
|||
|
|
let i = 0;
|
|||
|
|
i < (countStr.value.length > 5 ? countStr.value.length : 5) - numArrlen;
|
|||
|
|
i++
|
|||
|
|
) {
|
|||
|
|
numArr.value.unshift(0);
|
|||
|
|
}
|
|||
|
|
if (lis.value) {
|
|||
|
|
lis.value.forEach((item, index) => {
|
|||
|
|
const ty = numArr.value[index];
|
|||
|
|
item.style.transform = `translateY(-${ty * 32}px)`; // 滚动数字(li标签)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.fp-box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
overflow: hidden;
|
|||
|
|
li {
|
|||
|
|
width: 26px;
|
|||
|
|
height: 32px;
|
|||
|
|
flex-direction: column;
|
|||
|
|
transition: transform 1s ease-in-out;
|
|||
|
|
& > span {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
display: flex;
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 25px;
|
|||
|
|
float: left;
|
|||
|
|
.num-wrap {
|
|||
|
|
font-family: "DigifaceWide";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|