### 实现 Vue3 中
Element Plus
自定义 `v-
loading`
效果
为了实现
自定义的
加载效果，可以在项目中创建一个新的插件来扩展默认行为。通过这种方式能够更灵活地控制
加载动画的行为和样式。
#### 创建
Loading 插件
在项目的根目录下新建一个名为 `
loading` 文件夹，并在其内部创建两个主要文件：一个是用于处理指令逻辑的 `directive.js`；另一个是用来封装服务端调用逻辑的服务层 `service.js`[^3]。
##### 定义 Directive
```javascript
// src/
loading/src/directive.js
import { nextTick } from 'vue';
export default {
mounted(el, binding) {
const
loadingInstance = el.getAttribute('data-
loading-instance');
if (binding.value && !
loadingInstance) {
let target;
if (typeof binding.arg === 'string') {
target = document.querySelector(binding.arg);
} else {
target = el;
}
const instance = El
Loading.service({
target,
...binding.modifiers,
...(typeof binding.arg !== 'string' ? binding.arg : {}),
});
el.setAttribute('data-
loading-instance', JSON.stringify(instance));
} else if (!binding.value &&
loadingInstance) {
const instance = JSON.parse(
loadingInstance);
instance.close();
el.removeAttribute('data-
loading-instance');
}
},
};
```
此部分代码实现了当绑定的数据发生变化时自动开启或关闭指定区域内的
加载状态。它还支持传递额外参数给 `El
Loading.service()` 方法来
自定义显示选项。
##### 封装 Service 层
```javascript
// src/
loading/src/service.js
const instances = new Map();
function open(options) {
const instance = El
Loading.service(options);
instances.set(instance.id, instance);
return instance;
}
function close(id) {
const instance = instances.get(id);
if (instance) {
instance.close();
instances.delete(id);
}
}
export default { open, close };
```
这段代码提供了打开和关闭全局
加载实例的方法。每次启动新的
加载器都会被记录在一个映射表里以便后续管理。
##### 注册 Plugin
最后一步是在应用入口处注册这个新构建好的插件：
```javascript
// src/
loading/index.js
import directive from './src/directive';
import service from './src/service';
export default {
install(app) {
app.directive('
loading', directive);
app.config.globalProperties.$
loading = service;
},
};
```
这样就可以在整个应用程序范围内
使用增强版的 `v-
loading` 功能了。
#### 应用场景示例
假设有一个表格组件需要展示大量数据，在获取这些信息之前希望向用户提供友好的等待提示，则可以直接利用上述定制化的解决方案如下所示[^1]:
```html
<template>
<div
class="table-container">
<!-- 表格 -->
<el-table v-
loading="$
loading.open({ fullscreen: true })" @load-complete="$
loading.close()">
...
</el-table>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
defineProps<{
loadComplete?: () => void;
}>();
const $
loading = inject('$
loading');
onMounted(() => {
// 模拟异步请求完成后的回调函数触发
setTimeout(() => {
emit('load-complete');
}, 2000);
});
</script>
```
在此例子中，每当页面初次渲染完毕后会立即激活全屏模式下的
加载指示符直到两秒延迟结束并发出事件通知父级组件停止该过程。
扫一扫
1061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
