vue组件object_vue全局弹窗通用解决方案——组件函数化

我们在vue项目开发过程中总是遇到各种个样的全局弹窗(权限提醒，alert提示，缴费提醒)，这些全局弹窗全站很多地方在调用，调用调用很蛮烦，将这些组件部署到全局位置，又无法做到按需加载，而且部署到全局的组件数据回传(比如检测缴费是否完成)又是一个问题，我们又得借助vuex或者event来传递，又回造成vuex的滥用。

我们举一个简单的场景：

如果我们要在vue里实现一个类似原生alert的弹出框，大概长这个样子。

确定

否定

export default {

props: ['text'],

data() {

return {};

},

methods: {

ok() {

this.$emit('ok');

},

cancel() {

this.$emit('cancel');

}

}

}

如果有一个页面，需要使用这个组件，即使是空页面，也要做下面代码里描述的所有事情

打开alert

import uiAlert from '******.vue'; // 引用组件

export default {

data() {

return {

isShow:false //控制弹窗是否显示的开关

};

},

methods: {

showAlert() { //控制弹窗显示

this.isShow = true;

},

fine() { //弹窗打开后点击ok的事件绑定

this.isShow = false;

// 点击ok触发的事情

},

cancel() { //弹窗打开后点击cancel的事件绑定

this.isShow = false;

// 点击cancel触发的事情

}

},

components:{uiAlert}

}

汇总一下，做的事情有

1、引用组件

2、设置控制显示的变量开关

3、设置弹出组件的函数

4、设置多个回调事件，监听返回值

但是我们想一下，假如我们可以像调用原生组件类似的形式，一个函数搞定，会更方便。获取返回值的方式比如promise、回调。比如我们封装成返回promise的一个函数，代码可能像下面这样。

打开alert

im