vue版數(shù)字翻牌器的封裝
更新時間：2022年04月20日 11:58:00 作者：三倆成群
這篇文章主要為大家詳細(xì)介紹了vue版數(shù)字翻牌器的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
在 Vue 3 中,如果你使用 reactive 來定義一個響應(yīng)式對象,那么這個對象的屬性是不能被重新賦值的,因為 reactive 會將對象的屬性轉(zhuǎn)換為 getter/setter,這樣 Vue 才能追蹤到屬性的變化,這篇文章主要介紹了vue3 中使用 reactive 的問題,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了vue表單綁定實現(xiàn)多選框和下拉列表的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了vue如何在data中引入圖片的正確路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式
通過require動態(tài)引入, 發(fā)現(xiàn)報錯：require is not defind,這是因為 require 是屬于 Webpack 的方法,本文給大家介紹vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue在組件中使用v-model的場景，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
下面小編就為大家分享一篇Vue中v-for的數(shù)據(jù)分組實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了el-table?動態(tài)合并不定項多級表頭的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue.js中關(guān)于點擊事件方法的使用(click)
這篇文章主要介紹了vue.js中關(guān)于點擊事件方法的使用(click)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue+element自定義查詢組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09