今天給大家分享一款超酷的多功能Vue訊息彈出層元件VueSimpleAlert。

vue-simple-alert 基於vue.js+sweetalert2構建的輕量級alert、confirm、prompt提示元件。支援TS呼叫。

特性提供類似Dom window的方法：alert()、confirm()、prompt()基於vue2+sweetalert2開發透過基於Promise的介面支援TypeScript安裝

$ npm i vue-simple-alert -S

快速使用

// 全域性引入元件import Vue from "vue";import VueSimpleAlert from "vue-simple-alert";Vue.use(VueSimpleAlert);//Vue.use(VueSimpleAlert, { reverseButtons: true });// 使用元件this.$alert("Hello Vue Simple Alert.");this.$confirm("Are you sure?").then(() => {  //do something...});this.$prompt("Input your name").then(text => {  // do somthing with text});

高階用法

可以透過$fire使用sweetalert2的fire方法。

this.$fire({  title: "Title",  text: "text",  type: "success",  timer: 3000}).then(r => {  console.log(r.value);});

非常不錯的一款開源Vue.js彈框元件，需要的不可錯過哈。

# sweetalert2http://mishengqiang.com/sweetalert2/# 演示地址https://sweetalert2.github.io/# 倉庫地址https://github.com/sweetalert2/sweetalert2

好了，今天就分享到這裡。希望以上的分享對大家有所幫助。