emoji claps

อิโมจิ-ปรบมือ

องค์ประกอบที่ติดประสบการณ์ในการตบมือ? / ชอบ? / ไม่ชอบ? -

มีอะไรใหม่?

ใช่ คุณสามารถ click hold เพื่อเพิ่มจำนวนได้ ลองใช้ Codepen!

การติดตั้ง

$ yarn add emoji-claps // ES module

หรือในเบราว์เซอร์

 < script src =" https://unpkg.com/emoji-claps/dist/emoji-claps.umd.js " > </ script >
<!-- It's umd bundle--> 

โพลีฟิล

แอนิเมชันใช้เมธอด Element.animate และ effect.target ซึ่งเป็นวิธีที่ซับซ้อนและมีความจำเป็น แต่ไม่รองรับเบราว์เซอร์และ Safari เวอร์ชันต่ำอย่างสมบูรณ์ ดังนั้นโปรดเรียกใช้ polyfill web-animation next ก่อนเริ่มต้น

 < script src =" https://rawgit.com/web-animations/web-animations-js/master/web-animations-next-lite.min.js " > </ script > 

การใช้งาน

 < emoji-claps 
             emoji =" ? " 
             currentcount =" 30 " 
             maxcount =" 50 " 
             bullets =' ["?","?","","?"] ' 
             bulletcount =" 6 " 
             prefix =" + "
             > </ emoji-claps > 

เหตุการณ์

เต็ม

เหตุการณ์ full จะทริกเกอร์เมื่อ currentcount === maxcount

ยกตัวอย่าง

 const emojiClaps = document . querySelector ( 'emoji-claps' ) ;
emojiClaps . addEventListener ( 'full' , e => {
  // Do something if currentcount is 50 (maxcount)
} )

คลิก

เหตุการณ์ click จะทริกเกอร์เมื่อผู้ใช้คลิก emoji-claps

ยกตัวอย่าง

 const emojiClaps = document . querySelector ( 'emoji-claps' ) ;
emojiClaps . addEventListener ( 'click' , e => {
  // Do something track after user click
} )

---

ใบอนุญาต MIT © 2019 realdennis