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 Elenent实现表格相同数据列合并
Nov 30 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue实现列表垂直无缝滚动
Apr 08 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调用Twitter的RSS的实现代码
2010/03/10 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
js读取本地excel文档数据的代码
2010/11/11 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue中实现回车键登录功能
2020/02/19 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
go和python变量赋值遇到的一个问题
2017/08/31 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
详解python持久化文件读写
2019/04/06 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
scrapy头部修改的方法详解
2020/12/06 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
七年级地理教学反思
2014/01/26 职场文书
机关节能减排实施方案
2014/03/17 职场文书
班风学风建设方案
2014/05/06 职场文书
新学期标语
2014/06/30 职场文书
环卫工人节活动总结
2014/08/29 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书