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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python字符串中的单双引
2017/02/16 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Django models文件模型变更错误解决
2020/05/11 Python
Python正则表达式如何匹配中文
2020/05/27 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
大学系主任推荐信范文
2013/12/24 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
餐厅总厨求职信
2014/03/04 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server