vue加载动画element ui V-loading属性的踩坑记录

vue加载动画element ui V-loading属性

根据需求，由预览按钮打开弹窗，且弹窗需要渲染的数据较多，渲染的速度比较慢，所以要加一个加载中的效果，element ui的 v-loading属性就正好可以解决这一需求，但是当加入这一属性之后发现，是实现了加载功能，但是加载并不能自己判断何时停下，又不像其他页面需要页面刷新的时候出现加载动画效果，所以给diglog弹窗一个加载动画，但如何判断他何时停下呢

 想了好几种办法最后想通了，在点击弹窗的时候先给一个加载属性为true，让他加载，然后等请求接口赋值以后，再给他一个属性为false关掉加载，就可以了

element-ui v-loading 指令 instance.close()报错

解决 sentry issues 时看到一个这样的报错

TypeError: Cannot read properties of undefined (reading ‘close’)

报错的代码来自 element-plus 的 v-loading 指令, 在值变为 false 执行 close 函数时, 示例 instance 为空导致的问题

原因

页面是列表页, 每个列表项有一个展开加载数据的 v-loading, 代码给 v-loading 初始值传入了 undefined, 请求数据之前给 loading 做了个初始化, 将 loading 值初始为 false

v-loading="expendStepData[item.productOrderId]?.loading"

数据从 undefined 变成 false 触发了 v-loading 的 update, 因为值为 false, 所以 v-loading 执行了 close 操作, 因为 loading 的值从来没有是 true, 所以没有创建实例, 导致 instance 为 undefined, 所以执行 instance.close() 自然就报错了

element-plus loading 代码

const vLoading = {
  mounted(el, binding) {
    if (!!binding.value) {
      createInstance(el, binding);
    }
  },
  updated(el, binding) {
    const instance = el.instance;
    if (binding.oldValue !== binding.value) {
      if (binding.value) {
        createInstance(el, binding);
      } else {
        instance.close();
      }
    }
  },
  unmounted(el) {
    var _a;
    (_a = el == null ? void 0 : el.instance) == null ? void 0 : _a.close();
  }
};

初始值为 undefined 导致 mounted 的时候没有创建实例, 而值从 undefined 变为 false 时, 会触发 update, 导致执行 instance.close(), 这个时候 v-loading 的 instance 没有创建是一个 undefined

建议

v-loading 严格传入 boolean 值, 虽然大多数情况不会有问题, 即使像我这样的情况, 其实也不影响使用, 如果不是 sentry, 估计页没有发现这个问题, 但是能避免的问题还是要避免; 我的 element-plus 时候 2.x 版本的, 不知道 3.x 是否还有这个问题 

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。