写个弹窗Dialog

问题：我自己写了个组件，发现显示的时候组件在我本来位置后面排列显示出来了，根本弹出的位置都不对呀。。。。
实现：

1. 如果实现弹窗要记得底层应该是整个App界面，而不是哪一块界面
2. 上代码

<style lang="scss" scoped>

.g-mask-view {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.38);
    z-index: 999;
}

.flex-center {
  @include flex-center();
}

</style>

3. 该如何调用使用呢？

<template>
  <div class="g-mask-view flex-center">
      展示头框
  </div>
</template>

4. 我们通常需要点击空白区，就把弹窗给收回

<div class="g-mask-view flex-center" @click.self="$emit('close')">
      展示头框
</div>

我们外层调用的时候

    <AccountModeDialogApp v-if="showAccountMode" @close="showAccountMode = false" ></AccountModeDialogApp>

5. 有时候我们需要比较特殊的位置，所以我们就得需要熟练掌握位置
   WeChat0e7e6bd218f2efea485b6d0d2c16c80f.png
   比如我们需要处理 这个 文字 与 ❎ 的位置，文字居中 ❎靠右。我们的解决方案是 这两个同时在一个dom里面，然后设置文字居中text-align: center;然后再单独对❎的css进行调整也就是设置❎的 float: right; 即可