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

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

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