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怎么实现数字动态翻牌器”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！