vue版數(shù)字翻牌器的封裝

更新時間：2022年04月20日 11:58:00 作者：三倆成群

這篇文章主要為大家詳細介紹了vue版數(shù)字翻牌器的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue版數(shù)字翻牌器的封裝代碼，供大家參考，具體內(nèi)容如下

封裝vue版數(shù)字翻牌器

<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;?
? ? ? ? ? ? ? ? }?
? ? ? ? ? ?}?
? ? ? ? ?}?
? ? ? ?}?
? ? }?
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: