vue封装数字翻牌器


Posted in Vue.js onApril 20, 2022

本文实例为大家分享了vue版数字翻牌器的封装代码,供大家参考,具体内容如下

封装vue版数字翻牌器

<template> 
    <div class="number"> 
        <ul id="dataNums"> 
            <li v-for="(item,index) in list" :key="index"> 
                <div class="dataBoc"> 
                    <div class="tt" :style="{transition:'all 2.5s ease-in-out 0s',top:'-'+item.top+'px'}"> 
                        <span v-for="(item2,index2) in numList" :key="index2">{{item2}}        
                         </span>                 
                    </div> 
                </div> 
            </li> 
        </ul> 
    </div> 
</template>

vue封装数字翻牌器

js部分 

export default { 
    props:{ number:Number }, 
    data(){ 
        return{ 
            list:[], 
            numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.'] 
        } 
    }, 
    mounted(){ 
        this.scroll(); 
    }, 
    methods:{ 
        scroll(){ 
            this.list=this.number.toString().split(''); 
            let arr=[]; 
            this.list.forEach((value) => { 
                arr.push({ num:value, top:0 }) 
            }); 
            this.list=arr; 
          let Hei=parseFloat(getComputedStyle(document.getElementById("dataNums")).height);             
            this.list.forEach((value,index) => { 
            setTimeout(()=>{ 
                value.top=parseFloat((value.num*Hei)+(Hei*10)); },index*300); 
            }); 
        } 
    } 
}

css样式 

.number { 
    margin-bottom: 10px; 
    text-align: center; 
    ul { 
    display: inline-block; 
    height: 40px; 
    text-align: center; 
    li { 
        float: left; 
        width: 40px; 
        height: 40px; 
        text-align: center; 
        margin: 0 4px; 
        background: url("../assets/images/yuyueshf/number.png") no-repeat center;//背景图                     
        background-size: 100% 100%; 
        .dataBoc { 
            position: relative; 
            width: 100%; 
            height: 100%; 
            overflow: hidden; 
            .tt { 
                position: absolute; 
                top: 0; 
                left: 0; 
                width: 100%; 
                height: 100%; 
                span{ 
                width: 100%; 
                height: 100%; 
                line-height: 40px; 
                float: left; 
                text-align: center; 
                font-size: 26px; 
                color: #f64841; 
                } 
           } 
         } 
       } 
    } 
}

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

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
You might like
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
Python网络编程详解
2017/10/31 Python
关于反爬虫的一些简单总结
2017/12/13 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python简易版图书管理系统
2019/08/12 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
表达自我的市场:Society6
2018/08/01 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
精彩自我鉴定
2014/01/16 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
市场开发计划书
2014/05/07 职场文书
走进敬老院活动总结
2014/07/10 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
Python 中面向接口编程
2022/05/20 Python