mpvue animated number

numéro-animé-mpvue

Composant d'animation de défilement de mise à jour numérique mpvue de l'applet WeChat.

Un composant numérique animé pour mpvue (un framework pour développer le mini programme WeChat).

Démo

Scannez le mini code de programme suivant sur WeChat pour voir l'effet réel.

Scannez le code suivant avec WeChat pour voir les effets du monde réel.

Installation

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

Usage

En utilisant l'intérieur du mpvue SFC, mettez à jour this.temperatureReading , puis le nombre changera en conséquence avec une animation élégante.

// 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 : 30 px ;
    font-size : 16 px ;
    text-align : center ;
    font-weight : bolder ;
    font-family : " Avenir Next Condensed " , sans-serif ;
    color : #333 ;
  }
</ style >

Licence

Copyright (c) 2018 Mengdi Gao

Basé sur la documentation Vue.js sous licence MIT.

Ce logiciel est sous licence MIT.