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