vue怎么通过if跳出方法_如何优雅的写一个Vue 的弹框

写Vue或者是react 都会遇见弹框的问题。也尝试了多种办法来写弹框，一直都不太满意，今天特地看了一下 Element UI 的源码，模仿着写了一个简易版。

大概有一下几个问题：

1、弹框的层级问题，如果在嵌套的组件里面使用了弹框，可能会出现弹框的层级不够高

2、弹框的函数调用方式

首先第一点：弹框的层级

如果将弹框放置在最外层，body下面。就不会有层级问题。

第二点：弹框的函数调用

首先我们可以思考，将组件的实例拿到，然而初学的时候好像只有 通过  refs 能拿到组件的对象，然后调用显示隐藏

其实我们可以通过 VUE.extend  这个函数，对组件进行初始化，然后可以拿到 组件对象

对于 Vue.extend 不太清楚的，建议自己去百度学习一下。

下面给出弹框的代码： alert.vue 文件下面

{ {title}}

{ {content}}

{ {btn}}

export default {

name:"rule_alert",

data() {

return {

title: '提示',

content: '',

btn: '确定',

visible:false

}

},

methods: {

close() {

this.visible = false;

this._promise && this._promise.resolve()

}

},

watch: {

'$route' () {

this.close();

}

}

}

.wind-alert-dialog {

top: 30%;

width: 80%;

left: 50%;

opacity: 1;

position: fixed;

margin-left: -40%;

font-size: 14px;

text-align: center;

font-family: 'Microsoft Yahei';

background: #FFFFFF;

border-radius: 8px;

z-index: 999999999;

box-si