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


Posted in Vue.js onApril 20, 2022

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

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

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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
vue3语法糖内的defineProps及defineEmits
Apr 14 #Vue.js
You might like
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
名片管理系统python版
2018/01/11 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
python实现简易淘宝购物
2019/11/22 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
中国央视网签名寄语
2014/01/18 职场文书
学习方法演讲稿
2014/05/10 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
建党伟业的观后感
2015/06/01 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
如何自己动手写SQL执行引擎
2021/06/02 MySQL
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle