vue 数字翻牌器动态加载数据


Posted in Vue.js onApril 20, 2022

数字动态翻牌器

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

第一步创建一个组件页面,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 数字翻牌器动态加载数据

加入逗号:

vue 数字翻牌器动态加载数据

至于样式背景可以自定义

以上就是本文的全部内容,希望对大家的学习有所帮助。

Vue.js 相关文章推荐
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 #Vue.js
vue封装数字翻牌器
Apr 20 #Vue.js
vue特效之翻牌动画
Apr 20 #Vue.js
解决vue中provide inject的响应式监听
Apr 19 #Vue.js
vue3种table表格选项个数的控制方法
Apr 14 #Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 #Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 #Vue.js
You might like
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
react-router中的属性详解
2017/06/01 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
基于python编写的微博应用
2014/10/17 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
python线性插值解析
2020/07/05 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
后勤主管工作职责
2013/12/07 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
满月酒答谢词
2014/01/14 职场文书
员工薪酬福利制度
2014/01/17 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
产品发布会策划方案
2014/05/12 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
少先队工作总结2015
2015/05/13 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书