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: 342

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



6 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 "



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






  • PELATIHAN KAMPUS
  • Pelatihan Komputer (DIGITAL SCHOOL)
  • Study Tour GoTv
  • Penerimaan Calon Anggota Angkatan XX "Explore Experience With Us"
  • IT FUN