Vue2-Simplert - Alternatif SweatAlert untuk Framework VueJS

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 :

<script>
import Simplert from 'vue2-simplert'
export default {
   components: {Simplert}
};
</script>

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

<simplert isUseRadius=true
          isUseIcon=true
          ref="simplert">
</simplert>

4. 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 open tersebut :

let obj = {
   title: 'Custom Function',
   message: 'Click close to trigger custom function',
   type: 'info',
   colorBtn: '#00b35e',
   onClose: this.onClose
}
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.

Ditulis oleh Irfan Maulana