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-cli 创建模板项目
Nov 19 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue实现拖拽交换位置
Apr 07 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
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
You might like
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP实现验证码校验功能
2017/11/16 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
13个PHP函数超实用
2015/10/21 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
详解jQuery-each()方法
2019/03/13 jQuery
Vue动态创建注册component的实例代码
2019/06/14 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
简单使用Python自动生成文章
2014/12/25 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
广告设计专业自荐信范文
2013/11/14 职场文书
大学生学习自我评价
2014/01/13 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
毕业晚会主持词
2014/03/24 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang