Vue2-Simplert - Alternatif SweatAlert untuk Framework VueJS

Vue2-Simplert - Alternatif SweatAlert untuk Framework VueJS

Create: SaldiSaldi | Jumat, 26 Mei 2017 | 17:52:41 WITA | dibaca: 548

SweatAlert merupakan salah satu library yang populer dan menjadi begitu mainstream untuk digunakan para developer terutama ketika membutuhkan untuk menampilkan suatu informasi atau pesan dalam bentuk popup atau modal. VueJS sendiri adalah framework Javascript yang dibuat oleh Evan You yang setahun belakangan ini menjadi begitu populer dan mulai banyak diadopsi oleh banyak developer dan perusahaan sebagai base javascript framework mereka.

VueJS sendiri sudah mengadopsi konsep component, yang mana juga banyak diadopsi oleh framework javascript terbaru lainnya. Dengan mengadopsi konsep ini kita bisa membuat suatu komponen yang bisa digunakan berulang layaknya library di jQuery. VueJS merupakan framework yang berkembang di komunitas, termasuk juga dengan perkembangan dan ketersediaan berbagai komponen yang berbasiskan VueJS yang makin lama makin banyak dan lengkap seiiring perkembangan komunitasnya. Sebagian besar komponen yang tersedia, kita bisa temukan di salah satu repository yang bernama Awesome-Vue, yang merupakan kumpulan atau daftar dari berbagai komponen dan repositor keren dan berguna berbasiskan VueJS.

Sayangnya memang di beberapa kesempatan kita mungkin tidak bisa menemukan komponen seperti yang kita ingin di VueJS, kalaupun ada biasanya tidak sesuai. Cara yang paling mudah untuk menyelesaikan masalah ini adalah dengan berusaha membuat komponen sendiri dan melemparkannya ke komunitas agar bisa berkembang lebih cepat. Saya sendiri membutuhkan komponen seperti SweatAlert pada waktu itu, dan sayangnya juga tidak dapat menemukan seperti yang saya inginkan. Akhirnya saya putuskan untuk membuat sendiri komponen SweatAlert berbasiskan Vue2 yang saya beri nama Vue2-Simplert

 

Berikut beberapa petunjuk untuk menggunakan Vue2-Simplert :

1.     Untuk mendownload Vue2-Simplert, Anda bisa memanfaatkan npm atau yarn dengan cara : npm install vue2-simplert — save-dev untuk npm dan yarn add vue2-simplert untuk yarn.

2.     Untuk meng-import nya pun cukup mudah, cukup dengan cara berikut :

3.  <script>

4.  import Simplert from 'vue2-simplert'

5.  export default {

6.  components: {Simplert}

7.  };

8.  </script>

9.     Vue2-Simplert menggunakan template yang bisa Anda gunakan seperti berikut :

10. <simplert isUseRadius=true

11.       isUseIcon=true

12.       ref="simplert">

13. </simplert>

14.                        Kemudian untuk membuka Popup Alert tersebut, Anda bisa memanggil method open dengan mengirimkan beberapa parameter yang Anda set sesuai dengan kebutuhan Anda. Berikut contoh memanggil method opentersebut :

15. let obj = {

16.    title: 'Custom Function',

17.    message: 'Click close to trigger custom function',

18.    type: 'info',

19.    colorBtn: '#00b35e',

20.    onClose: this.onClose

21. }

22. this.$refs.simplert.openSimplert(obj)

Mudah bukan ?

Anda bisa menemukan semua dokumentasi penggunaan, method dan props yang tersedia di halaman wiki disini. Anda juga bisa melihat demo dari Vue2-Simplert disini.

Karena repository ini dibuat open-source, maka silahkan fork Vue2-Simplert di github bila Anda menemukan bug atau ada permintaan feature baru.

Terima kasih dan semoga bermanfaat.

 SUMBER : https://www.codepolitan.com/vue2-simplert-alternatif-sweatalert-untuk-framework-vuejs-59279ae22e8ce



17 KOMENTAR

| 29 Juli 2017 || 15:41:19
" You really make it seem really easy with your presentation however I to find this topic to be really something which I feel I would never understand. It seems too complicated and very vast for me. I’m looking ahead in your next submit, I will attempt to get the hang of it! "
wingsio | 15 Agustus 2017 || 14:03:50
" Your article reflects the issue people are concerned about. The article provides timely information that reflects multi-dimensional views from multiple perspectives. I look forward to reading quality articles that contain timely information from you. "
toyota pamulang | 11 September 2017 || 15:24:25
" compatible sama semua pemrogaman berbasis web kah? "
patcher apps download | 11 September 2017 || 15:33:58
" Download Lucky patcher no root apk now. LuckyPatcher Android APK. It is said that 10,000+ users downloaded Lucky Patcher No Root Hack latest version on 9Apps for free every week! It truly does not offer any money. "
Promo Mobil Honda Samarinda Terbaru | 13 September 2017 || 09:48:33
" nice artikel "
harga sewa mobil semarang | 14 September 2017 || 09:48:49
" mantap jiwa "
sewa mobil mercy | 25 September 2017 || 14:47:50
" masih belum paham "
tonsil stones removal | 27 September 2017 || 12:29:48
" Jump to How do you know if you have tonsil stones - tonsil stones are white spots on tonsils ... You can usually determine if you have tonsil stones through ...These are the most common tonsil stones symptoms you should look out for. "
harga toyota bogor | 03 Oktober 2017 || 11:23:38
" kurang jelas gan skripnya, mohon bimbinganya "
reseller baju hijab | 03 Oktober 2017 || 11:48:23
" sip gan membantu banget untuk tugas kelompok ane "
sablon kaos terbaik | 03 Oktober 2017 || 13:54:53
" frame network asinya buat apa sih? "
jemuran otomatis | 03 Oktober 2017 || 14:00:00
" sangat membantu gan thanks "
Obat Aborsi Semarang | 04 Oktober 2017 || 00:14:35
" I love your post here is more information for us thanks for sharing with us. "
remy hair extensions | 10 Oktober 2017 || 08:27:41
" Brown hair of clip in hair extensions the hair "
hammer of thor bandung | 14 Oktober 2017 || 08:35:44
" Much thanks to you a great amount for this and continue sharing. "
nodejs quiz | 25 Oktober 2017 || 11:08:38
" The information you share is very useful. It is closely related to my work and has helped me grow. Thank you! "
Jual Obat Aborsi Ampuh | 02 November 2017 || 02:20:31
" I love your post here is more information for us thanks for sharing with us. "



ISI KOMENTAR

NAMA

WEBSITE

KOMENTAR


Captcha Sepakbola
Apakah anda manusia?Lebih baik lagi kalau anda menyukai sepak bola
Sebutkan pemain sepak bola disamping:

Captcha Sepakbola by codingwear








  • $DCC = NEW XXI("Solidaritas","Loyalitas","Kualitas");
  • PELATIHAN KAMPUS
  • Pelatihan Komputer (DIGITAL SCHOOL)
  • Study Tour GoTv
  • IT FUN