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中的nextTick
Dec 28 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue3不同环境下实现配置代理
May 25 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php 高性能书写
2010/12/11 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php实现评论回复删除功能
2017/05/23 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
python实现将文本转换成语音的方法
2015/05/28 Python
5种Python单例模式的实现方式
2016/01/14 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
班主任工作年限证明
2014/01/12 职场文书
班风学风建设方案
2014/05/06 职场文书
中考标语大全
2014/06/05 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
服务明星事迹材料
2014/12/29 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python
MySql数据库触发器使用教程
2022/06/01 MySQL