element使用loading组件中的指令方式，更改默认背景色、文字、icon等

最新推荐文章于 2024-09-27 14:47:38 发布

转载最新推荐文章于 2024-09-27 14:47:38 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/shenStudy/p/15403877.html

文章标签：

#javascript #vue.js #前端

vue 专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了Vue.js中如何使用v-loading指令创建自定义的加载效果。通过绑定Boolean值控制加载动效的显示与隐藏，同时可以设置加载文案、图标和背景色。例如，使用`v-loading.fullscreen.lock=loading`实现全屏加载，并锁定屏幕滚动。此外，还可以通过`element-loading-text`、`element-loading-spinner`和`element-loading-background`属性自定义加载文案、图标和背景颜色。示例代码展示了在el-table组件上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义指令为v-loading，只需要绑定Boolean即可。

v-loading="loading"		loading为true则显示加载动效，为false则不显示加载动效
自定义加载文案，图表，背景色
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
当需要全屏加载则添加fullscreen修饰符
v-loading.fullscreen="loading" 
若需要锁定屏幕的滚动，可以使用lock修饰符
v-loading.lock="loading"

实例
<el-table
        ref="multipleTable"
        v-loading.fullscreen.lock="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        height="100%"
      >  </el-table>