vue版数字翻牌器怎么封装

这篇文章主要介绍了Vue版数字翻牌器怎么封装的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue版数字翻牌器怎么封装文章都会有所收获，下面我们一起来看看吧。

封装vue版数字翻牌器

<template>     <div class="number">         <ul id="dataNums">             <li v-for="(item,index) in list" :key="index">                 <div class="dataBoc">                     <div class="tt" :>                         <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版数字翻牌器怎么封装”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue版数字翻牌器怎么封装”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。