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 相关文章推荐
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
vue css 相对路径导入问题级踩坑记录
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 array的学习笔记
2012/05/16 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
Laravel 队列使用的实现
2019/01/08 PHP
javascript知识点收藏
2007/02/22 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JavaScript中的标签语句用法分析
2015/02/10 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python中文编码问题小结
2014/09/28 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python写入xml文件的方法
2015/05/08 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
优秀求职自荐信怎样写
2013/12/18 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
旅游活动总结
2014/08/27 职场文书
超市员工管理制度
2015/08/06 职场文书
旅行社计调工作总结
2015/08/12 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android