mpvue animated number

mpvue-애니메이션-번호

WeChat 애플릿 mpvue 디지털 업데이트 스크롤 애니메이션 구성요소.

mpvue(WeChat Mini 프로그램 개발을 위한 프레임워크)용 애니메이션 숫자 구성 요소입니다.

데모

실제 효과를 보려면 WeChat에서 다음 미니 프로그램 코드를 스캔하세요.

실제 효과를 보려면 WeChat으로 다음 코드를 스캔하세요.

설치

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

용법

mpvue SFC 내부를 사용하여 this.temperatureReading 업데이트하면 숫자가 그에 따라 우아한 애니메이션으로 변경됩니다.

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

특허

저작권 (c) 2018 멩디 가오

MIT 라이선스 Vue.js 문서를 기반으로 합니다.

이 소프트웨어는 MIT 라이선스에 따라 라이선스가 부여됩니다.