Vue3项目里v-loading指令怎么装、怎么用？有哪些容易踩的坑？

首先得明确，Vue3本身没有内置现成的全局v-loading指令，日常开发中最常用的要么是基于Element Plus官方封装的，要么是自己手写一个轻量的适配版本——毕竟不是所有项目都会引入完整的UI组件库，咱们分两种情况一步步说,最后再把踩过的坑列出来帮大家避雷。

基于Element Plus的官方v-loading怎么装怎么用

这个是最多中小项目用的，官方文档写得虽然全，但有些细节容易漏，比如指令在组件内的局部注册，或者是加载区域被内容撑开、被遮挡的问题。

安装Element Plus

如果是新项目，直接执行npm或者yarn的命令就行；老项目如果要单独加这个UI库，记得检查Vue版本，Element Plus只支持Vue3.x哈，安装完成后，全局注册是最方便的，不用每次用都单独引。 全局注册的代码也简单，在main.js或者main.ts里写三两句：引入Element Plus、引入它的样式，然后app.use一下，如果嫌包太大，也可以按需引入v-loading相关的组件和指令，不过按需引入要配合unplugin-auto-import和unplugin-vue-components插件，配置起来稍微麻烦一丢丢,新手先从全局注册上手就行。

基础用法：给指定容器加加载动画

基础用法就是给某个元素加v-loading属性，属性值是布尔值，true的时候显示加载动画，false的时候隐藏，比如点击查询按钮后，给表格的容器div加加载，等接口返回数据后再关掉。 这里有个关键点：加载动画的定位是基于父元素的，所以要给加v-loading的容器设置position: relative或者absolute、fixed，不然加载层会飘到整个页面上去，找不到正确的区域，官方默认的v-loading会给容器自动加position: relative，但有时候容器本身有fixed或者其他特殊定位，自动加的就会失效,这时候手动加个定位属性最稳妥。

进阶用法：自定义加载文本、背景色、图标

官方默认的加载样式是白色背景、蓝色旋转图标，没有文字，有时候需要根据项目风格改改，怎么改呢？可以用v-loading的修饰符或者属性绑定。 比如想加个“拼命加载中…”的文本，就加v-loading:loading-text="loadingText"？不对，更简单的是用v-loading后面跟的冒号属性，或者用对象的形式绑定v-loading的配置，哦对了，对象配置是最灵活的，可以同时改背景色、图标、文本、文本颜色这些，举个例子：v-loading="isLoading" v-loading.background="rgba(255,255,255,0.9)" v-loading.text="正在同步用户信息，请稍候" v-loading.spinner="自定义的SVG图标组件"——这里注意自定义图标要单独在当前组件注册，或者全局注册。 还有修饰符，比如v-loading.fullscreen就是全屏加载，不用指定容器，定位自动变成fixed覆盖整个视口，这个在登录成功跳转、或者整个页面刷新数据的时候特别好用，全屏加载还有个body修饰符，区别不大，不过有时候页面有overflow: hidden的元素,加body修饰符能更好地覆盖。

不想用Element Plus？自己手写轻量Vue3 v-loading指令

有些极简项目、或者公司要求不能随便用第三方UI库的，自己手写一个也不难，核心逻辑就是创建一个全屏或容器内的遮罩层元素，根据布尔值控制它的显示隐藏，还要处理元素的定位问题,最后挂载到Vue的directives全局或局部配置里。

手写的核心步骤

第一步，先写遮罩层的HTML和CSS样式，遮罩层最好是绝对定位，宽高100%覆盖父容器，背景色用半透明的比较友好，然后旋转图标可以用CSS写一个简单的圆环，不用SVG也能实现，这样更轻量。 第二步，在Vue3的directive函数里写钩子函数，Vue3的指令钩子和Vue2有点不一样，要注意用mounted、updated、unmounted这些替代之前的bind、inserted、update、unbind，mounted钩子的作用是：当指令绑定到元素上时，检查父元素有没有定位，没有的话自动加relative；然后创建遮罩层DOM，添加到绑定元素的子节点里；初始化的时候把遮罩层隐藏，updated钩子是：当指令的绑定值（就是那个布尔值）变化时，控制遮罩层的display或者opacity、visibility属性，unmounted钩子是：当绑定的元素被销毁时，把遮罩层也从DOM里删掉，防止内存泄漏。 第三步，全局或局部注册这个自定义指令，全局注册就在main.js里app.directive('loading', 刚才写的钩子对象),局部注册就在组件的directives选项里写。

用Vue3 v-loading最容易踩的3个坑

坑1：加载动画永远不显示

这个坑最多人踩，排查的时候先看两点：第一，布尔值的初始值有没有设对？比如一开始设成false，接口请求后才设成true，但如果接口请求太快，可能肉眼看不到加载动画，这时候可以加个setTimeout测试一下，第二，加v-loading的容器有没有定位？或者容器有没有宽高？如果容器是display: none，或者宽高都是0,加载层当然显示不出来。

坑2：全屏加载被导航栏或侧边栏挡住

这个问题出在导航栏或侧边栏的z-index比全屏加载的z-index高，官方Element Plus的全屏加载z-index默认是2000，自定义的话记得设得比页面上所有固定定位的元素都高,比如设成9999。

坑3：接口请求失败后加载动画还一直转

很多新手会忘记在接口的catch或者finally块里把isLoading设成false，finally块是最稳妥的，不管接口成功还是失败，finally都会执行,所以一定要把关闭加载的代码放在finally里。

最后再提个小技巧：如果很多页面都要用到相同配置的v-loading，比如固定的文本、背景色，可以在全局注册的时候把默认配置写好，或者封装成一个公共的组合式函数（hook），每次用的时候直接调用hook返回的isLoading和startLoading、stopLoading方法，这样代码更简洁,修改起来也方便。