参考https://blog.csdn.net/weixin_43548442/article/details/121392929重新编写,增加了svg矢量显示。
<template>
<ul class="fp-box" :style="{ height: `${numberHight}px` }">
<li
ref="li"
v-for="i in limt"
:key="i"
:style="{ width: `${numberWidth - 5}px` }"
>
<span
v-for="(item, i) in numSvgDatas"
:key="i"
:style="{ width: `${numberWidth}px` }"
>
<svg
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
:width="numberHight"
:height="numberWidth"
>
<path :d="item" :fill="fontColor"></path>
</svg>
</span>
</li>
</ul>
</template>
<script>
//参考: https://blog.csdn.net/weixin_43548442/article/details/121392929
export default {
name: "digitalFlop",
data() {
return {
numArr: [],
numSvgDatas: [
"M257.5 498.6V190l53.7-53.5 53.7 53.5v246.4l-107.4 62.2z m0 336v-308L364.9 580v254.6L311.2 888l-53.7-53.4z m70.6-715.5l54.8-54.9H643l55.1 54.9-55.1 52.4H382.8l-54.7-52.4z m0 786.2l54.8-52.4H643l55.1 52.4-55.1 54.9H382.8l-54.7-54.9z m332.2-468.6V190.3l53.7-53.5 53.7 53.5v308.6l-107.4-62.2z m0 397.8V579.4l107.3-53.5v308.6L714 888l-53.7-53.5z",
"M458.1 435.9v-265l107.2-107v434.2l-107.2-62.2z m0 416.7V579.1l107.2-53.5v433.9L458.1 852.6z",
"M257.7 171.6L383 64.2h260.1l54.8 54.9-54.8 52.4H257.7z m0 662.8V525.8L365 579.4v255.1L311.3 888l-53.6-53.6z m24.5-323.2l100.8-58h260.1l101.2 58-101.2 49.4H383l-100.8-49.4z m46 394.1l54.8-52.4h282.5l102.4 107.3H383l-54.8-54.9z m332.3-469V190l53.7-53.5 53.7 53.5v308.6l-107.4-62.3z",
"M268.5 64.2h363.1l54.8 54.9-54.8 52.4H371.5l-103-107.3z m0 896l103-107.3h260.1l54.8 52.4-54.8 54.9H268.5z m2.2-448l100.8-59h260.1l101.1 58-101.1 49.4H371.5l-100.8-48.4zM649 436.3V190l53.7-53.5 53.7 53.5v308.6L649 436.3z m0 398.1v-255l107.3-53.5v308.6L702.6 888 649 834.4z",
"M257.7 498.6V64.2l107.3 107v265.1l-107.3 62.3z m24.5 13.6l100.7-59h259.9l101.1 58-101.1 49.3H382.9l-100.7-48.3z m378-75.8V171.5l107.3-107v434l-107.3-62.1z m0 416.9V579.7l107.3-53.5v434L660.2 853.3z",
"M257.5 498.6V190l53.7-53.5 53.7 53.5v246.4l-107.4 62.2z m0 461.6l102.9-107.3h282.5l54.8 52.4-54.8 54.9H257.5z m24.5-449l100.8-58h260.1l101.2 58-101.2 49.4H382.8L282 511.2z m46.1-392.1l54.8-54.9h362.5L642.9 171.6H382.8l-54.7-52.5z m332.2 715.3v-255l107.3-53.5v308.6L714 887.9l-53.7-53.5z",
"M257.5 498.6V190l53.7-53.5 53.7 53.5v246.4l-107.4 62.2z m0 335.8V525.8l107.3 53.5v255.1l-53.7 53.5-53.6-53.5zM282 512.2l100.8-59h260.1l101.2 58-101.2 49.4H382.8L282 512.2z m46.1-393.1l54.8-54.9h362.5L642.9 171.6H382.8l-54.7-52.5z m0 786.2l54.8-52.4H643l55.1 52.4-55.1 54.9H382.8l-54.7-54.9z m332.2-70.8V579.4l107.3-53.5v308.6L714 888l-53.7-53.5z",
"M265.7 63.9h476.1L632.4 171.2H372.6L265.7 63.9zM651.6 436V189.6L759 81.3v416.9L651.6 436z m0 417.2V579.4L759 525.9v434.3l-107.4-107z",
"M257.5 498.6V190l53.7-53.5 53.7 53.5v246.4l-107.4 62.2z m0 336v-308L364.9 580v254.6L311.2 888l-53.7-53.4z m24.5-322l100.8-59.3h260.1l101.2 58-101.2 49.4H382.8L282 512.6z m46.1-393.5l54.8-54.9H643l55.1 54.9-55.1 52.4H382.8l-54.7-52.4z m0 786.2l54.8-52.4H643l55.1 52.4-55.1 54.9H382.8l-54.7-54.9z m332.2-468.6V190.3l53.7-53.5 53.7 53.5v308.6l-107.4-62.2z m0 397.8V579.4l107.3-53.5v308.6L714 888l-53.7-53.5z",
"M257.5 498.6V190l53.7-53.5 53.7 53.5v255l-107.4 53.6z m22.4 461.6l102.9-107.3h260.1l54.8 52.4-54.8 54.9h-363z m2.1-448l100.8-59h260.1l101.2 58-101.2 49.4H382.8L282 512.2z m46.1-393.1l54.8-54.9H643l55.1 54.9-55.1 52.4H382.8l-54.7-52.4zM660.3 445V190l53.7-53.5 53.7 53.5v308.6L660.3 445z m0 389.4V588.1l107.3-62.2v308.6L714 887.9l-53.7-53.5z",
],
};
},
props: {
num: {
type: Number,
default: 0,
require: true,
},
limt: {
type: Number,
default: 5,
},
fontColor: {
type: String,
default: "#FFF",
},
numberHight: {
type: Number,
default: 30,
},
numberWidth: {
type: Number,
default: 20,
},
},
watch: {
num(val) {
this.init(val);
},
},
mounted() {
setTimeout(() => {
this.init(this.num);
}, 500);
},
methods: {
init(num) {
this.numArr = String(num).split("");
let len = this.numArr.length;
for (let i = 0; i < this.limt - len; i++) {
this.numArr.unshift(0);
}
this.$refs.li.forEach((item, index) => {
let ty = this.numArr[index];
item.setAttribute("class", `item0${ty}`);
item.style.transform = `translateY(-${ty * this.numberHight}px)`;
});
},
},
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.fp-box {
display: flex;
overflow: hidden;
li {
-webkit-text-size-adjust: none;
margin: 0px;
flex-direction: column;
transition: transform 1s ease-in-out;
list-style-type: none;
span {
float: left;
}
}
}
@for $i from 0 through 9 {
$base-font-size: -20px;
.item0#{$i} {
transform: translateY($i * $base-font-size);
}
}
</style>
使用:
<digitalFlop :num="head.today" :fontColor="'gold'" />