Vue + Element Plus 手动注册 v-loading 指令

Vue + Element Plus 手动注册 v-loading 指令

环境说明

• vue ^3.5.18
• element-plus ^2.10.7

情形

如果我们没有按照官方的自动引入方法, 转而选择手动引入各种组件, 会发现直接使用 v-loading 的时候出现报错:

网上找了各种方法, 什么 app.use 都是不对的, 下面介绍正确的方法.

方案

直接在需要使用的项目的 main.ts 或者对应的入口文件中, 按照下面这样写: (最小可运行版本)

import { createApp } from 'vue';
import App from './App.vue';
import { ElLoading } from 'element-plus';const app = createApp(App);
app.directive('loading', ElLoading.directive);
app.mount('#app');

现在就可以直接使用 v-loading 指令了.

Q & A

为什么不引入 ElLoadingDirective 然后注册?

经过尝试, 这样做会报错, 可以说是一种经验之谈.