SZYGM1.0/src/views/realTime/components/CountBox/index.vue

<template>
  <div class="count-box">
    <span class="label">{{ label }}</span>
    <li v-for="(_, index) in numberItems" :key="index" class="number-item">
      <span class="number-box">
        <i ref="numberBoxes" class="number-list">0123456789.</i>
      </span>
    </li>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

const props = defineProps({
  countNumber: {
    type: Number,
    default: 0,
  },
  length: {
    type: Number,
    default: 6,
    validator(value: number) {
      return value > 0
    },
  },
  label: {
    type: String,
    default: '总数',
  },
})
const numberBoxes = ref<HTMLElement[] | undefined[]>([])
const numberItems = computed(() => {
  let numberString = props.countNumber.toString()
  if (numberString.length > props.length) {
    ElMessage.error(`${props.label}过大`)
    numberString = '9'.repeat(props.length)
  }
  numberString = '0'.repeat(props.length) + numberString
  return numberString.slice(-props.length).split('')
})
watch(numberItems, items => {
  for (let index = 0; index < numberBoxes.value.length; index++) {
    const box = numberBoxes.value[index]
    if (box) {
      if (items[index] === '.') {
        box.style.transform = `translate(-50%, -${1000 / 11}%)`
      } else {
        box.style.transform = `translate(-50%, -${
          (Number(items[index]) * 100) / 11
        }%)`
      }
    }
  }
})
</script>

<style scoped lang="scss">
.count-box {
  position: relative;
  height: 32px;
  line-height: 32px;
  text-align: center;
  list-style: none;
  writing-mode: vertical-lr;
  text-orientation: upright;
  /*文字禁止编辑*/
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  overflow: hidden;
  .label {
    padding-right: 8px;
    line-height: 32px;
    font-family: DIN, Microsoft YaHei;
    font-weight: bold;
    color: #101116;
    writing-mode: horizontal-tb !important;
    text-orientation: none !important;
    /*文字禁止编辑*/
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }
  .number-item {
    width: 32px;
    height: 32px;
    list-style: none;
    margin-right: 4px;
    background: #410425;
    border-radius: 4px;
    border: 1px solid #d2d6df;
    font-family: DIN, Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    & > .number-box {
      position: relative;
      display: inline-block;
      margin-right: 10px;
      width: 100%;
      height: 100%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      overflow: hidden;
      & > .number-list {
        font-family: DIN, Microsoft YaHei;
        font-style: normal;
        position: absolute;
        top: 7px;
        left: 14px;
        transform: translate(-50%, 0%);
        transition: transform 1s ease-in-out;
        letter-spacing: 10px;
      }
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>