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" :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; 
                } 
           } 
         } 
       } 
    } 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue3.0翻牌数字组件使用方法详解

    本文实例为大家分享了vue3.0翻牌数字组件使用的具体代码,供大家参考,具体内容如下 代码 <template>   <div class="number-count-wrap" :class="numberSize">     <!-- 标题 start -->     <div class="number-title" :style="{'text-align': titleAlign}&q

  • vue实现数字动态翻牌的效果(开箱即用)

    实现效果图 原理 将1~9的数字竖直排版,通过translate移动位置显示不同数字,使用transition控制transform属性有动画效果 技术点 css 属性 writing-mode: vertical-lr,使数字竖直排版 移动  transform: translate(-50%, -40%); y值控制移动至哪个数字 transition  控制transform属性有动画效果 实现代码(注释比较详细,不再赘述) <!-- * @Author: mat * @Date: 201

  • vue实现数字动态翻牌器

    数字动态翻牌器 最近项目里使用到了数字翻牌器,于是自己写了一个,动态的翻牌器 第一步创建一个组件页面,NumberCount.vue 思路:大概就是显示几位数,然后从0开始滚动到当前的数值的位置,在每一个位置都有0-9的数,然后就是往上滚动当前数值的次数到当前的数,话不多说上代码 <template>   <div class="chartNum">     <div class="box-item">       <li

  • vue实现翻牌动画

    本文实例为大家分享了vue实现翻牌动画的具体代码,供大家参考,具体内容如下 应用场景 常用于大屏订单数量展示 原理 利用css writing-mode: vertical-rl 使数字垂直排列 利用css transform 使数字滚动 实现思路 根据css先让数字垂直排列,总共设置8列 根据组件传递的数值,如果不满8位,递归补零 补零之后,循环根据 translate(-50%, -${numberArr[index] * 10}%,查看动画 <template>     <div

  • vue版数字翻牌器的封装

    本文实例为大家分享了vue版数字翻牌器的封装代码,供大家参考,具体内容如下 封装vue版数字翻牌器 <template>      <div class="number">          <ul id="dataNums">              <li v-for="(item,index) in list" :key="index">                 

  • 详解vue中axios的使用与封装

    分享下我自己的axios封装 axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save 在src下新建文件夹 service / index.js 接着上代码 import axios from 'axios'; import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示 import router from '..

  • vue中axios的二次封装实例讲解

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建request.js文件 import axios from 'axios' import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '

  • jQuery开发仿QQ版音乐播放器

    本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器,是前端技术的综合应用,所用素材来源于网络,仅供学习分享使用,如有不足之处,还请指正. 涉及知识点 在本例中用到的知识点如下,按jQuery和CSS进行区分: jQuery 是一个 JavaScript 库, 极大地简化了 JavaScript 编程,常见知识点如下: 通过标签获取jQuery对象:var $audio =$("audio"); 通过选择符获取jQuery对象并设置文本内容:$(".music_pr

  • Vue管理系统前端之组件拆分封装详解

    组件封装 在上一篇记录中,首页中有太多的代码,为了避免代码的臃肿,需要对主要的功能模块拆分,来让代码看起来更简洁,且能进行复用. 拆分后还加了些小功能,加入了修改 title 的代码,修改方式参考vue 动态修改 title. 还增加了当前请求的页面缓存,使用状态管理器处理.监听路由,保存到 state 中,来处理的. 如何监听可参考vue 计算属性和监听属性. 完整效果图如下: 首页布局拆分后结构 拆分后的,布局结构图: 拆分后代码 布局最外层 index 代码,使用头部,侧边栏,主内容栏组成

  • Vue axios获取token临时令牌封装案例

    前言 为什么非要写这个博客呢?因为这件事让我有一种蛋蛋的优疼.剩下的都别问,反正问我也不会说.因为流程图我都不想(懒得)画. 开发架构 前端页面:Vue 网络请求:Axios;方式:vue add axios 缓存方案 全局变量:Vuex 本地缓存:LocalStorage 技术依赖 你猜? 背景 公司开发一个嵌入App的Web页面,安全方面使用老套路:App通过URL传参给前端(包含签名),前端把参数透传给H5后端验签,完事儿之后前端再决定用户是否合法.另外定义了N个JS方法前端根据固定GET

  • 基于vue的video播放器的实现示例

    当现有video播放器不能满足需求时,需要自己对video进行封装. video事件 loadstart: 在视频开始加载时触发,给currentTime赋值(历史播放记录或0). durationchange: 元信息已载入或已改变,视频的长度发生了改变.获取到视频长度(duration,并给currentTime赋值(历史播放记录或0)). playing: 在视频开始播放时触发(不论是初次播放.在暂停后恢复.或是在结束后重新开始). pause: 播放暂停时触发. timeupdate:

  • Vue中使用装饰器的方法详解

    目录 前言 什么是装饰器? 装饰器的使用 js中使用装饰器 不使用装饰器 vue 中使用装饰器 一些常用的装饰器 1. 函数节流与防抖 2. loading 3. 确认框 总结 前言 相信各位在开发中一定遇到过二次弹框确认相关的需求.不管你使用的是UI框架的二次弹框组件,还是自己封装的弹框组件.都避免不了在多次使用时出现大量重复代码的问题.这些代码的积累导致项目的可读性差.项目的代码质量也变得很差.那么我们如何解决二次弹框代码重复的问题呢?使用装饰器 什么是装饰器? Decorator是ES7的

随机推荐