Neglected Parking Meter

    @gaomd/mpvue-animated-number

    0.1.3 • Public • Published

    mpvue-animated-number

    微信小程序 mpvue 数字更新滚动动画组件。

    An animated number component for mpvue (a framework to develop WeChat Mini Program).

    Demo

    微信扫一扫以下小程序码查看真实效果。

    Scan the following code with WeChat to see the real-world effects.

    WeChat Mini Program Scan Code

    Installation

    $ npm i --save @gaomd/mpvue-animated-number
    

    Usage

    Using inside the mpvue SFC, update this.temperatureReading then the number will change accordingly with elegant animation.

    // src/pages/home/home.vue
    
    <template>
      <p class="temperature">
        <AnimatedNumber
          :value="temperatureReading"
          :precision="2"
        >
        </AnimatedNumber>
      </p>
    </template>
    
    <script>
      import AnimatedNumber from '@gaomd/mpvue-animated-number';
    
      export default {
        components: {
          AnimatedNumber,
        },
        data() {
          return {
            temperatureReading: 3.14,
          };
        },
      }
    </script>
    
    <style>
      /* optional */
      .temperature {
        line-height: 30px;
        font-size: 16px;
        text-align: center;
        font-weight: bolder;
        font-family: "Avenir Next Condensed", sans-serif;
        color: #333;
      }
    </style>

    License

    Copyright (c) 2018 Mengdi Gao

    Based on MIT Licensed Vue.js documentation.

    This software is licensed under the MIT License.

    Install

    npm i @gaomd/mpvue-animated-number

    DownloadsWeekly Downloads

    1

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    120 kB

    Total Files

    18

    Last publish

    Collaborators

    • gaomd