element 手写el-loading加载样式

原创已于 2022-04-22 14:16:01 修改 · 817 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #elementui #vue

于 2022-04-22 14:10:06 首次发布

这段代码展示了如何在Vue中利用ElementUI库创建一个全屏加载效果。通过`v-if`控制加载状态，结合`.el-loading-mask`和`.el-loading-spinner`类实现加载遮罩和旋转图标，提供用户友好的界面反馈。

class样式使用的是element ui样式

<div v-if="loading" class="el-loading-mask" style="width: 100%;height: 100%;margin: 0 auto;">
  <div class="el-loading-spinner">
    <svg viewBox="25 25 50 50" class="circular">
      <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
    </svg>
  </div>
</div>