mpvue animated number

número-animado-mpvue

Componente de animación de desplazamiento de actualización digital mpvue del subprograma WeChat.

Un componente numérico animado para mpvue (un marco para desarrollar el miniprograma WeChat).

Manifestación

Escanee el siguiente mini código de programa en WeChat para ver el efecto real.

Escanee el siguiente código con WeChat para ver los efectos del mundo real.

Instalación

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

Uso

Usando dentro del mpvue SFC, actualice this.temperatureReading y luego el número cambiará en consecuencia con una animación elegante.

// 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 >

Licencia

Copyright (c) 2018 Mengdi Gao

Basado en la documentación de Vue.js con licencia del MIT.

Este software tiene la licencia MIT.