vue3.0翻牌数字组件使用方法详解

<template>
  <div class="number-count-wrap" :class="numberSize">
    <!-- 标题 start -->
    <div class="number-title" :style="{'text-align': titleAlign}">{{title}}</div>
    <!-- 标题 end -->
    <div class="number-count" :class="numberAlign">
      <!-- 计数器 start -->
      <ul class="number-content">
        <template v-for="(item,index) in orderNum"
          :key="index">
        <li class="number-item" v-if="!isNaN(item)">
          <span>
            <ul class="number-list" :ref="numberItem">
              <li>0</li>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
              <li>7</li>
              <li>8</li>
              <li>9</li>
            </ul>
          </span>
        </li>
        <li class="separator" v-else>
          {{item}}
        </li>
        </template>
      </ul>
      <!-- 计数器 end -->
      <!-- 单位 start -->
      <div class="number-unit" v-if="unit">{{unit}}</div>
      <!-- 单位 end -->
    </div>
  </div>
</template>

<script>
import { onMounted, watch, ref, reactive, toRefs } from 'vue'
export default {
  name: "numberCount",
  props: {
    numberSize: { // 字号大小 middle 中号 small 小号
      type: String,
      default: ''
    },
    title: { // 标题
      type: String,
      default: ""
    },
    titleAlign: { // 标题对齐方式
      type: String,
      default: ''
    },
    numberAlign: { //数字对齐方式
      type: String, // center 居中对齐
      default: ''
    },
    unit: { // 单位
      type: String,
      default: ""
    },
    countNum: { // 数值
      type: Number,
    },
    initDelay: { // 首次加载延时
      type: Number,
    }
  },
  setup(props) {
    const numberItemList = ref([]);
    const numberItem = (el) => {
      numberItemList.value.push(el);
    };
    var locarCountNum = props.countNum.toLocaleString()
    locarCountNum = locarCountNum.split('')
    const data = reactive({
      orderNum: locarCountNum, // 默认订单总数
    });
    watch(props, (nval, oval) => {
      if (nval) {
        toOrderNum(nval.countNum)
      }
    })
    onMounted(() => {
      setTimeout(() => {
        toOrderNum(props.countNum) // 这里输入数字即可调用
      }, props.initDelay);
    })
    function setNumberTransform () {
      const numberItems = numberItemList.value // 拿到数字的ref，计算元素数量
      const numberArr = data.orderNum.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(0%, -${numberArr[index] * 10}%)`
      }
    }
    // 处理总订单数字
    function toOrderNum(num) {
      // console.log('num',num)
      // num = num.toString()
      // 把订单数变成字符串
      // if (num.length < 7) {
      //   num = '0' + num // 如未满八位数，添加"0"补位
      //   toOrderNum(num) // 递归添加"0"补位
      // } else if (num.length === 7) {
      //   // 订单数中加入逗号
      //   // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
      //   data.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
      // } else {
      //   // 订单总量数字超过八位显示异常
      //   // _this.$message.warning('总量数字过大')
      // }
      setNumberTransform()
    }
    return {
      setNumberTransform,
      toOrderNum,
      numberItem,
      ...toRefs(data)
    }
  }
};
</script>
<style scoped lang="less">
.number-count-wrap {
  .number-title {
    font-size: .18rem;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: .15rem;
    font-weight: bold;
  }
  .number-count {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    .number-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
        /*文字禁止编辑*/
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
      .number-item {
        width: 0.32rem;
        // height: 1.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0.02rem;
        &>span {
          position: relative;
          display: inline-block;
          width: 100%;
          height: 0.4rem;
          overflow: hidden;
          background: linear-gradient(180deg, #2167D0 0%, #164D8F 100%);
          box-shadow: 0 .04rem 0 0 #176ED6;
          border-radius: .06rem;
          border: 1px solid white;
          padding-bottom: .04rem;
          box-sizing: border-box;
          .number-list{
            transition: transform 1s ease-in-out;
            text-align: center;
            font-weight: 600;
            li {
              height: 0.4rem;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: .3rem;
              font-weight:400;
              color: white;
              padding-bottom: .04rem;
              box-sizing: border-box;
            }
          }
        }
      }
      .separator {
        font-size: .3rem;
        font-weight: normal;
        color: #FFFFFF;
        line-height: 1;
        margin: 0 0.025rem;
      }
    }
    .number-unit {
      margin-left: .1rem;
      font-size: .18rem;
      font-weight: normal;
      color: #B1B7BC;
    }
  }
  .center {
    justify-content: center;
  }
}

// middle start
.middle {
  .number-title {
    font-size: .12rem;
    margin-bottom: .10rem;
  }
  .number-count {
    .number-content {
      .number-item {
        width: 0.2rem;
        margin: 0 0.0175rem;
        &>span {
          height: 0.25rem;
          box-shadow: 0 .025rem 0 0 #176ED6;
          border-radius: .04rem;
          padding-bottom: .025rem;
          .number-list{
            li {
              height: 0.25rem;
              font-size: .2rem;
              font-weight:400;
              color: white;
              box-sizing: border-box;
            }
          }
        }
      }
      .separator {
        font-size: .2rem;
        margin: 0 0.025rem;
      }
    }
    .number-unit {
      margin-left: .06rem;
      font-size: .12rem;
    }
  }
}
// middle end
</style>