vue版数字翻牌器的封装

Zarah ·

更新时间:2024-11-01

· 1008 次阅读

本文实例为大家分享了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>

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 封装

1024 个赞