如何给popover页面加一个loading的遮罩？

Question

在popover页面进行操作，点击按钮后，想加一个遮罩层（类似显示【加载中】），让画面的上所有按钮在加载的这段时间内不可点击。该如何实现？

在popover的父页面加遮罩成功了，但是没有把popover页面也给罩住，所以那个方案暂时不行。

Answer 1

如果使用的是vue框架，应该在点击按钮的时候调用this.$loading(),然后关闭用this.$loading().close()就可以吧

Answer 2

使用v-loading指令即可实现

<el-popover>
  <div v-loading="loading">
  这是你的自定义pop内容
    <el-button @click="loading = true">加载</el-button>
  <div>
</el-popover> 

Answer 3

vue的话在最外面加个loading页面，状态放store控制。
这样有点麻烦，简化下可以在请求拦截那里去控制这个状态，请求那里加个参数控制要不要显示loading

Answer 4

loading 没有覆盖所有元素，意味着遮罩层和 popover 不在同一层级，或者是 loading 的 z-index 值小于 popover，通常使用组件库自带的 loading 不会存在这种问题。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 5

在popover的父页面加遮罩成功了，但是没有把popover页面也给罩住

看起来像是遮罩层的 z-index 没有 popover 的大，所以没有盖上。

---

如果使用了 popover 出来时，数据已经完善，只是你想加个额外的 loading，那可以使用 element-ui 的 v-loading。

如果数据是 popover 弹出时同步加载，那数据加载后往往需要重新渲染弹出框，不然弹出框可能会撑成到奇怪的位置。那就得控制在 loading 结束后，重新触发一次弹出框