源码搜藏网

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。