+62 852-4056-7490 •

Artikel

Vue2-simplert - Alternatif Sweatalert Untuk Framework Vuejs

SaldiSaldi 3 Comments Mei 26, 2017
img

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


Tags: web framework

3 Comments

reply

John Doe

June 29, 2014 - 11:23 Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
reply

Diana Doe

June 29, 2014 - 11:23 Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
reply

Melissa Doe

June 29, 2014 - 11:23 Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Peter Doe

June 29, 2014 - 11:23 Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Leave a reply Your email address will not be published.


Allowed HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Inappropriate and irrelevant comments will be removed at an admin's discretion.
Your email is used for verification purposes only, it will never be shared.