mpvue animated number

nomor-animasi-mpvue

Komponen animasi gulir pembaruan digital mpvue applet WeChat.

Komponen angka animasi untuk mpvue (kerangka kerja untuk mengembangkan Program Mini WeChat).

Demo

Pindai kode program mini berikut di WeChat untuk melihat efek sebenarnya.

Pindai kode berikut dengan WeChat untuk melihat efek nyata.

Instalasi

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

Penggunaan

Menggunakan di dalam mpvue SFC, perbarui this.temperatureReading maka nomornya akan berubah sesuai dengan animasi yang elegan.

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

Lisensi

Hak Cipta (c) 2018 Mengdi Gao

Berdasarkan dokumentasi Vue.js Berlisensi MIT.

Perangkat lunak ini dilisensikan di bawah Lisensi MIT.