mpvue animated number ดาวน์โหลด - mpvue animated number ดาวน์โหลดซอร์สโค้ด

mpvue animated number

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

mpvue-ภาพเคลื่อนไหวหมายเลข

แอพเพล็ต WeChat mpvue ส่วนประกอบแอนิเมชั่นการเลื่อนอัพเดตดิจิทัล

องค์ประกอบตัวเลขแบบเคลื่อนไหวสำหรับ mpvue (เฟรมเวิร์กเพื่อพัฒนา WeChat Mini Program)

การสาธิต

สแกนโค้ดมินิโปรแกรมต่อไปนี้บน WeChat เพื่อดูเอฟเฟกต์จริง

สแกนโค้ดต่อไปนี้ด้วย WeChat เพื่อดูเอฟเฟกต์ในโลกแห่งความเป็นจริง

รหัสสแกนโปรแกรม WeChat Mini

การติดตั้ง

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