vue怎么实现数字动态翻牌器

本篇内容主要讲解“vue怎么实现数字动态翻牌器”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么实现数字动态翻牌器”吧!

数字动态翻牌器

最近项目里使用到了数字翻牌器，于是自己写了一个，动态的翻牌器

第一步创建一个组件页面，NumberCount.vue

思路：大概就是显示几位数，然后从0开始滚动到当前的数值的位置，在每一个位置都有0-9的数，然后就是往上滚动当前数值的次数到当前的数，话不多说上代码

<template>   <div class="chartNum">     <div class="box-item">       <li         :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"         v-for="(item, index) in orderNum"         :key="index"       >         <span v-if="!isNaN(item)">           <i ref="numberItem">0123456789</i>         </span>         <span class="comma" v-else>{{ item }}</span>       </li>     </div>   </div> </template> <script> export default {   props: {     // 显示的数字     number: {       type: Number,     },     // 显示的长度     length: {       type: Number,     },   },   data() {     return {       orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认总数     };   },   mounted() {     setTimeout(() => {       this.toOrderNum(this.number); // 这里输入数字即可调用     }, 500);   },   watch: {     number: {       handler(val) {         this.toOrderNum(val);       },       deep: true,     },   },   methods: {     // 设置文字滚动     setNumberTransform() {       const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量       // eslint-disable-next-line no-restricted-globals       const numberArr = this.orderNum.filter(item => !isNaN(item));       console.log(numberItems.length, numberArr);       // 结合CSS 对数字字符进行滚动,显示数量       for (let index = 0; index < numberItems.length; index += 1) {         const elem = numberItems[index];         elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;       }     },     // 处理总数字     toOrderNum(num) {       const numtext = num.toString();       if (this.length) {         if (numtext.length < this.length) {           const numlist = `0${numtext}`; // 如未满固定数，添加"0"补位           this.toOrderNum(numlist); // 递归添加"0"补位         } else if (numtext.length === num.length) {           this.orderNum = numtext.split(''); // 将其便变成数据，渲染至滚动数组         }       } else {         this.orderNum = numtext.split('');       }       // 数字中加入逗号       // const length = numtext.length / 3;       // let count = '';       // for (let i = 0; i < length; i += 1) {       //   if (i === 0) {       //     count += `${numtext.slice(i, i + 3)},`;       //     console.log(count);       //   } else if (i === length - 1) {       //     count += numtext.slice(i * 3, i * 3 + 3);       //     console.log(count);       //   } else {       //     count += `${numtext.slice(i * 3, i * 3 + 3)},`;       //     console.log(count);       //   }       // }       // this.orderNum = count.split('');       this.setNumberTransform();     },   }, }; </script> <style scoped lang="scss"> /*总量滚动数字设置*/ .box-item {   position: relative;   height: 34px;   font-size: 20px;   font-family: AzonixRegular;   color: #021c25;   line-height: 41px;   text-align: center;   list-style: none;   writing-mode: vertical-lr;   text-orientation: upright; } /* 默认逗号设置 */ .mark-item {   width: 28px;   height: 34px;   position: relative;   /* 背景图片 */   background: url('~@/assets/images/overview/bg-chartNum.svg') no-repeat center     center;   background-size: 100% 100%;   list-style: none;   margin-right: 1px;   & > span {     position: absolute;     width: 100%;     height: 100%;     bottom: 2px;     left: 20%;     font-size: 20px;     writing-mode: vertical-rl;     text-orientation: upright;   } } /*滚动数字设置*/ .number-item {   width: 28px;   height: 34px;   /* 背景图片 */   background: url('~@/assets/images/overview/bg-chartNum.svg') no-repeat center     center;   background-size: 100% 100%;   // background: #ccc;   list-style: none;   margin-right: 1px;   & > span {     position: relative;     display: inline-block;     margin-right: 10px;     width: 100%;     height: 100%;     writing-mode: vertical-rl;     text-orientation: upright;     overflow: hidden;     display: flex;     align-items: center;     justify-content: center;     & > i {       font-style: normal;       position: absolute;       top: 8px;       left: 50%;       transform: translate(-50%, 0);       transition: transform 1s ease-in-out;       letter-spacing: 10px;     }   } } .number-item:last-child {   margin-right: 0; } </style>

不加逗号：

加入逗号：

至于样式背景可以自定义

到此，相信大家对“vue怎么实现数字动态翻牌器”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！