vue大屏数字翻牌，数字采用svg

参考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'" />