TDesign 的 Loading 组件怎么全局使用不生效？

司徒淑芳提问于 2026-03-01 17:27:22 阅读 4

组件

我在项目里引入了 TDesign，想用它的全局 loading，但调用 TLoading.show() 没反应，控制台也没报错。是不是漏了什么插件注册？

我按文档在 main.js 里加了 TLoading.install，也试过直接 import ‘tdesign-vue-next/es/loading/style’，但还是不行。

import { createApp } from 'vue';
import App from './App.vue';
import TDesign from 'tdesign-vue-next';
import { Loading as TLoading } from 'tdesign-vue-next';

const app = createApp(App);
app.use(TDesign);
// 也试过 app.use(TLoading);
app.mount('#app');

// 在组件里调用
TLoading.show();

我来解答赞 4 收藏

反馈

1 条解答

Newb.树果 Lv1

这个问题我之前也踩过坑，TDesign 的 Loading 函数式调用方式跟你想的不太一样。

首先你要搞清楚，TDesign 的 Loading 有两种用法：一种是组件形式，另一种才是函数式调用。你现在想用的是函数式，但调用方式不对。

你代码里写的是 TLoading.show()，这个方法其实根本不存在。正确的函数式调用方式是直接调用这个函数本身。

来看正确的写法：

import { Loading } from 'tdesign-vue-next';



// 显示全屏 loading

Loading({

  fullscreen: true,

  text: '加载中...',

});



// 或者简写，直接传 true

Loading(true);



// 关闭 loading

Loading(false);

如果你想拿到实例做更多控制，可以这样写：

import { Loading } from 'tdesign-vue-next';



// 会返回一个 loading 实例

const loadingInstance = Loading({

  fullscreen: true,

  text: '拼命加载中...'

});



// 需要关闭的时候调用 hide

loadingInstance.hide();

另外一种方式，如果你已经在 main.js 里全局注册了 TDesign，那在组件内部可以用全局方法调用：

// 组件内部

import { getCurrentInstance } from 'vue';



export default {

  setup() {

    const { proxy } = getCurrentInstance();

    

    // 通过 $loading 调用

    proxy.$loading(true);

    

    // 或者带配置

    proxy.$loading({

      fullscreen: true,

      text: '加载中'

    });

  }

}

这里有个坑要注意，getCurrentInstance() 只能在 setup 函数里用，在普通的 js 文件里拿不到实例。所以如果你想在 axios 拦截器里用全局 loading，还是得用第一种 import 的方式。

顺便说下你提到的 app.use(TLoading) 这个写法，其实没必要。app.use(TDesign) 已经把所有组件都注册了，单独再注册 Loading 是多余的。TDesign 的函数式 Loading 本质上是一个独立的函数，不需要 Vue 插件注册那套流程。

总结一下你的问题：不是漏了插件注册，是调用方法写错了。把 TLoading.show() 改成 Loading(true) 或者 Loading({ fullscreen: true }) 就能正常工作了。

2026-03-01 18:07