loading 我们一般用于页面等待，或者某个模块需要加载的时候，我们一般会使用 loading 组件。
loading 组件的展示一般分为两种，一种是全局 loading，一种是局部 loading。这两种使用也不一样，全局 loading 我们使用方法调用的方式来使用，局部 loading 我们使用指令调用的方式来使用。
创建如下的结构。
自定义 v-loading 指令
先思考一下，指令不是组件，所以只要用户引入并 use 了组件库，则直接生效，所以我们需要在组件的入口文件 index.js 中注册指令。
/packages/components/index.js
import * as components from "./components";
import "@test-ui/theme-chalk/index.less";
const FUNCTION_COMP = ["TMessage"]; // 方法调用类组件
const DIRECTIVE_COMP = ["TLoading"]; // 指令类组件
export default {
install(app) {
Object.entries(components).forEach(([key, value]) => {
if (!FUNCTION_COMP.includes(key)) app.component(key, value);
if (DIRECTIVE_COMP.includes(key)) app.use(value);
});
},
};
export const TMessage = components.TMessage;
export const TLoading = components.TLoading;
为什么是 use，而不是直接 app.directive，然后组件里面直接写自定义指令不就完了，因为我们还有全局的 loading，全聚德 loading 需要调用方法，所以我们在 loading 的组件内部再写 app.directive
我们这下来写一下 loading 组件入口文件，因为能被 use，所以是抛出的是一个对象，且携带有 install 方法。
import vLoading from "./src/directive.js";
export const TLoading = {
install(app) {
app.directive("loading", vLoading);
},·
// 后续要写全局的方法在这
};
export default TLoading;
loading/src/directive.js
const vLoading = {
mounted(el, binding) {
const value = binding.value;
},
};
export default vLoading;
我们画一个简单的 loading，使用 svg 的动画来实现。
loading/src/loading.vue
<template>
<div class="'t-loading'">
<div class="t-loading__spinner">
<div class="t-loading__spinner-icon">
<svg width="60" height="30" viewBox="0 0 100 50">
<circle cx="25" cy="25" r="10" fill="#5e72e4">
<animate
attributeName="opacity"
values="1;0.3;1"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
<circle cx="50" cy="25" r="10" fill="#5e72e4">
<animate
attributeName="opacity"
values="0.3;1;0.3"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
<circle cx="75" cy="25" r="10" fill="#5e72e4">
<animate
attributeName="opacity"
values="0.3;1;0.3"
begin="0.5s"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
</svg>
</div>
<div class="t-loading__text">加载中</div>
</div>
</div>
</template>
<script setup></script>
loading.less
.t-loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.8);
z-index: 1001;
.t-loading__spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: var(--t-primary);
text-align: center;
}
}
我们需要在自定义指令中 mounted 的时候，将 loading 组件挂载到当前元素上，所以我们需要在 directive.js 中引入 loading.vue 组件，然后通过 h 函数生成 vnode，然后通过 render 方法将组件挂载到当前元素上。
loading/src/directive.js
import TLoadingComponent from "./loading.vue";
import { h, render } from "vue";
const createLoading = (el) => {
el.style.position = "relative";
const vnode = h(TLoadingComponent);
render(vnode, el);
};
const vLoading = {
mounted(el, binding) {
const value = binding.value;
if (value) createLoading(el);
},
};
export default vLoading;
我们来写一个示例看一下
<t-table
:column-data="columnData"
:table-data="tableData"
border
v-loading="true"
/>
看起来没问题，但是我们一般情况下给传入一个布尔值，当这个值为 true 的时候才显示，false 的时候消失，这时候我们需要根据传入值的变化来控制显示和隐藏，这时候我们在 v-loading 指令中写一个 update 方法，并且当当前组件销毁的时候我们也需要将 loading 组件销毁。
import TLoadingComponent from "./loading.vue";
import { h, render } from "vue";
const createLoading = (el) => {
el.style.position = "relative";
const vnode = h(TLoadingComponent);
render(vnode, el);
};
const vLoading = {
mounted(el, binding) {
const value = binding.value;
if (value) createLoading(el);
},
updated(el, binding) {
if (!binding.value && binding.value !== binding.oldValue) {
el.removeChild(el.querySelector(".t-loading"));
} else if (binding.value && binding.value !== binding.oldValue) {
createLoading(el);
}
},
unmounted(el) {
el.removeChild(el.querySelector(".t-loading"));
},
};
export default vLoading;
我们只要发现绑定的值第一次生成的时候是正常的，然后变为 false，loading 消失，然后重新改变为 true 的时候组件不会重新生成了或者说新生成的组件没有在界面渲染，是因为什么呢？因为仅使用 removeChild 移除 DOM 节点不会触发 Vue 的生命周期钩子，导致组件实例仍然存在并保持对 DOM 的引用。这时候怎么处理呢？
import TLoadingComponent from "./loading.vue";
import { h, render } from "vue";
const createLoading = (el) => {
el.style.position = "relative";
const vnode = h(TLoadingComponent);
render(vnode, el);
};
const vLoading = {
mounted(el, binding) {
const value = binding.value;
if (value) createLoading(el);
},
updated(el, binding) {
if (!binding.value && binding.value !== binding.oldValue) {
el.removeChild(el.querySelector(".t-loading"));
render(null, el);
} else if (binding.value && binding.value !== binding.oldValue) {
createLoading(el);
}
},
unmounted(el) {
el.removeChild(el.querySelector(".t-loading"));
render(null, el);
},
};
export default vLoading;
这时候试一下呢？是不是正常了，你会发现我们添加了一个 render(null, el)，这个作用就是将上次的 loading 组件销毁。
补充属性
我们一般情况下需要自定义加载内容，以及加载的背景色，这时候怎么怎么传递呢？我们看一下 element-plus，打开 F12，你会发现他的属性实际是在 DOM 节点上插入的自定义属性，但是是非标准的自定义属性，因为自定义属性是必须 data- 开头，获取可以直接通过 DOM.dateset.[属性名]来获取，那这种非标准的怎么获取属性值呢？我们可以通过 getAttribute(属性名) 来获取，这下知道怎么做也简单了。
<t-table
:column-data="columnData"
:table-data="tableData"
border
v-loading="loading"
loading-text="等待中"
loading-background="rgba(122, 122, 122, 0.6)"
/>
我们在 createLoading 的方法中获取一下属性值，然后传递给组件
packages/loading/src/directive.js
const createLoading = (el) => {
el.style.position = "relative";
const vnode = h(TLoadingComponent, {
text: el.getAttribute("loading-text"),
background: el.getAttribute("loading-background"),
});
render(vnode, el);
};
然后我们在 loading 组件内部获取一下组件
<template>
<div
class="'t-loading'"
:style="{
'background-color': background,
}"
>
<div class="t-loading__spinner">
<div class="t-loading__spinner-icon">
<svg width="60" height="30" viewBox="0 0 100 50">
<!-- ... -->
</svg>
</div>
<div class="t-loading__text" v-if="text">{{ text }}</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
text: {
type: String,
},
background: {
type: String,
},
});
</script>
全屏加载
全屏加载我们可以使用调用方法来生成组件，我们可以抛出去一个方法，使用者可以使用这个方法来生成一个 loading 组件，然后这个方法返回一个操作 loading 的一个对象，这个对象包含关闭当前 loading 的方法，element-plus 是引入 ElMessage，然后通过 ElLoading.service() 传入一个 loading 的配置对象来显示组件，那我们可以在 loading 的入口文件中 export 一个 service 方法就行就行，然后 service 方法返回一个对象，包含关闭的方法。
import TLoadingComponent from "./loading.vue";
import { h, render } from "vue";
const createLoading = (el) => {
el.style.position = "relative";
const vnode = h(TLoadingComponent, {
text: el.getAttribute("loading-text"),
background: el.getAttribute("loading-background"),
});
render(vnode, el);
};
const vLoading = {
mounted(el, binding) {
const value = binding.value;
if (value) createLoading(el);
},
updated(el, binding) {
if (!binding.value && binding.value !== binding.oldValue) {
el.removeChild(el.querySelector(".t-loading"));
render(null, el);
} else if (binding.value && binding.value !== binding.oldValue) {
createLoading(el);
}
},
unmounted(el) {
el.removeChild(el.querySelector(".t-loading"));
render(null, el);
},
};
export const createGlobalLoading = ({ text, background }) => {
let vnode = h(TLoadingComponent, {
text,
loadingBackground: background,
screen: true, // 是否全屏
});
window.document.body.classList.add("t-loading-screen-parent");
render(vnode, window.document.body);
return {
close() {
window.document.body.removeChild(vnode.el);
render(null, window.document.body); // 该代码作用是清除vnode
vnode = null;
},
};
};
export default vLoading;
我们在给 loading 组件添加一个 screen 属性，如果 screen 为 true，则全屏显示，否则在绑定的元素上显示，我们也需要设置一个全屏加载的一个 class，来单独设置全屏加载的样式。
<template>
<div
:class="['t-loading', { 't-loading-mask--screen': screen }]"
:style="{
'background-color': background,
}"
>
<div class="t-loading__spinner">
<div class="t-loading__spinner-icon">
<svg width="60" height="30" viewBox="0 0 100 50">
<!-- ... -->
</svg>
</div>
<div class="t-loading__text" v-if="text">{{ text }}</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
text: {
type: String,
},
background: {
type: String,
},
screen: {
type: Boolean,
},
});
</script>
loading.less
.t-loading-mask--screen {
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
z-index: 1001;
pointer-events: none;
}
我们写一个试试
<template>
<t-button type="primary" @click="openFullScreenLoading"> 全屏加载 </t-button>
</template>
<script setup>
import { TLoading } from "@test-ui/components";
const openFullScreenLoading = () => {
const loading = TLoading.service({
text: "全屏加载",
background: "rgba(0, 0, 0, 0.7)",
});
setTimeout(() => {
loading.close();
}, 3000);
};
</script>
目前是正常的，但是细心的小伙伴会发现这个遮罩层是可以触发底部滚动的，那怎么解决呢？我们可以在触发全屏加载的时候给 body 设置一个 overflow: hidden，在关闭的时候再移除这个样式，我们可以给 body 添加一个类名来设置样式，然后关闭的时候移除掉这个类名。
export const createGlobalLoading = ({ text, background }) => {
let vnode = h(TLoadingComponent, {
text,
loadingBackground: background,
screen: true,
});
window.document.body.classList.add("t-loading-screen-parent");
render(vnode, window.document.body);
return {
close() {
window.document.body.classList.remove("t-loading-screen-parent");
window.document.body.removeChild(vnode.el);
render(null, window.document.body); // 该代码作用是清除vnode
vnode = null;
},
};
};
.t-loading-screen-parent {
overflow: hidden !important;
}
这样就完成了。
自定义图标
我们有时候想要吧加载的动画换一下，这个实现也比较容易，element 是把动画做在了组件内部，你只需要改变组件的图表即可，我们这边是在 svg 里面实现的动画图标，如果你想和 element-plus 一样，你就只需要 spinner 添加 css 动画即可，这边我们就不写了。给我们可以同样使用自定义属性传递 svg 图表，然后在生成 loading 组件的时候获取，然后在组件内部渲染即可。
<template>
<t-table
:column-data="columnData"
:table-data="tableData"
border
v-loading="loading"
loading-text="loading..."
:loading-spinner="loadingSVG1"
style="margin-top: 20px"
/>
<t-button
type="primary"
style="margin-top: 20px"
@click="openFullScreenLoading2"
>
全屏加载自定义图标
</t-button>
</template>
<script setup>
const loadingSVG1 = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42">
<circle cx="21" cy="21" r="5" fill="none" stroke="#5e72e4" stroke-width="2">
<animate attributeName="r" from="5" to="18" dur="1.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" from="1" to="0" dur="1.5s" repeatCount="indefinite"/>
</circle>
<circle cx="21" cy="21" r="5" fill="none" stroke="#5e72e4" stroke-width="2">
<animate attributeName="r" from="5" to="18" dur="1.5s" begin="0.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0.5s" repeatCount="indefinite"/>
</circle>
</svg>
`;
const loadingSVG2 = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42">
<circle cx="21" cy="21" r="18" fill="none" stroke="#5e72e4" stroke-width="3" stroke-dasharray="5,5">
<animate attributeName="stroke-dashoffset" from="0" to="20" dur="1s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
</circle>
</svg>
`;
const openFullScreenLoading2 = () => {
const loading = TLoading.service({
text: "全屏加载",
background: "rgba(0, 0, 0, 0.7)",
loadingSpinner: loadingSVG2,
});
setTimeout(() => {
loading.close();
}, 3000);
};
</script>
然后我们改一下
packages/loading/src/directive.js
import TLoadingComponent from "./loading.vue";
import { h, render } from "vue";
const createLoading = (el) => {
el.style.position = "relative";
const vnode = h(TLoadingComponent, {
text: el.getAttribute("loading-text"),
background: el.getAttribute("loading-background"),
icon: el.getAttribute("loading-spinner"),
});
render(vnode, el);
};
const vLoading = {
mounted(el, binding) {
const value = binding.value;
if (value) createLoading(el);
},
updated(el, binding) {
if (!binding.value && binding.value !== binding.oldValue) {
el.removeChild(el.querySelector(".t-loading"));
render(null, el);
} else if (binding.value && binding.value !== binding.oldValue) {
createLoading(el);
}
},
unmounted(el) {
el.removeChild(el.querySelector(".t-loading"));
render(null, el);
},
};
export const createGlobalLoading = ({ text, background, loadingSpinner }) => {
let vnode = h(TLoadingComponent, {
text,
loadingBackground: background,
screen: true,
icon: loadingSpinner,
});
window.document.body.classList.add("t-loading-screen-parent");
render(vnode, window.document.body);
return {
close() {
window.document.body.classList.remove("t-loading-screen-parent");
window.document.body.removeChild(vnode.el);
render(null, window.document.body); // 该代码作用是清除vnode
vnode = null;
},
};
};
export default vLoading;
packages/loading/src/loading.vue
<template>
<div
:class="['t-loading', { 't-loading-mask--screen': screen }]"
:style="{
'background-color': background,
}"
>
<div class="t-loading__spinner">
<div class="t-loading__spinner-icon" v-if="!icon">
<svg width="60" height="30" viewBox="0 0 100 50">
<circle cx="25" cy="25" r="10" fill="#5e72e4">
<animate
attributeName="opacity"
values="1;0.3;1"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
<circle cx="50" cy="25" r="10" fill="#5e72e4">
<animate
attributeName="opacity"
values="0.3;1;0.3"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
<circle cx="75" cy="25" r="10" fill="#5e72e4">
<animate
attributeName="opacity"
values="0.3;1;0.3"
begin="0.5s"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
</svg>
</div>
<div v-else v-html="icon"></div>
<div class="t-loading__text" v-if="text">{{ text }}</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
text: {
type: String,
},
background: {
type: String,
},
screen: {
type: Boolean,
},
icon: {
type: String,
},
});
</script>
丸美！
本节的loading加载组件就算开发完了，我们的组件教程依旧会持续更新，大家持续关注。
✨ 本专栏源码地址
登录