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+iview实现文件上传
Nov 17 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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往windows中添加用户
2006/12/06 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
初识laravel5
2015/03/02 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
基于windows下pip安装python模块时报错总结
2018/06/12 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python调用支付宝支付接口流程
2019/08/15 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
青年文明号服务承诺
2014/03/31 职场文书
六年级学生评语
2014/04/22 职场文书
婚前保证书
2014/04/29 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
会计专业自荐信范文
2015/03/05 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
信仰观后感
2015/06/03 职场文书
趣味运动会标语口号
2015/12/26 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
Golang 字符串的常见操作
2022/04/19 Golang