imyth

Vue ani number

A Vue 3 component, provide a convenient and light-weight number animation. ## Demo

Version Version: 0.1.4 Version Updated: 05/23/2022 By: imyth License: MIT

DownloadsLast30Days: 11

npm i vue-ani-number
yarn add vue-ani-number

vue-ani-number

A Vue 3 component, provide a convenient and light-weight number animation.

Demo

avatar

Requirements

  • vue.js 3.x

Installation

yarn add vue-ani-number

or

npm install vue-ani-number

Usage

  • use plugin
    import { createApp } from 'vue';
    import App from './App.vue';
    import VueAniNumber from 'vue-ani-number'
    

createApp(App).use(VueAniNumber).mount('#app');


* animation would be triggered by number changes

``` html
<template>
  <vue-ani-number :number="number" />
</template>
export default {
  name: "App",
  data() {
    return {
      number: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.number = 88888
      window.setTimeout(() => {
        this.number = 545876
      }, 5000)
    })
  }
};

Customize configuration

See Configuration Reference.

Copyright © 2020 vuejscomponent.com