
vue3 使用封装loading
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
vue2请看这篇文章 vue2封装loading
- 自己写一个loading页面,用作单个div的loading
- 在components中创建一个名为loading.vue的组件
<template>
<transition name="fade">
<section>
<div class="loading">
<img class="icon-animation" src="@/assets/loading.png" />
<p class="desc">数据加载中...</p>
</div>
</section>
</transition>
</template>
<script>
export default {
computed: {
},
data () {
return {
}
},
methods: {
},
destroyed() {
},
mounted() {
}
}
</script>
<style scoped lang="scss">
@-ms-keyframes iconRotate {
0% {
-ms-transform: rotate(0deg);
}
25% {
-ms-transform: rotate(90deg);
}
50% {
-ms-transform: rotate(180deg);
}
75% {
-ms-transform: rotate(270deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
@keyframes iconRotate {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
section {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: transparent;
z-index: 99;
.loading {
width: 100%;
text-align: center;
/* flex-direction: column; */
}
.icon-animation {
width: 60px;
height: 60px;
animation: iconRotate 1s linear infinite;
}
.desc {
font-size: 14px;
color: rgb(95, 89, 89);
}
}
</style>
- 在utils文件下创建一个名为loading的文件夹,文件夹下创建一个名为index.js和loading.js的文件
- loading.js
import { createApp, nextTick } from 'vue';
import Loading from '@/components/loading';
// 创建Loading组件实例
const Mask = createApp(Loading);
const maskInstance = Mask.mount(document.createElement('div'));
// 更新是否显示
const toggleLoading = (el, binding) => {
if (binding.value) {
nextTick(() => {
// 控制loading组件显示
el.instance.visible = true;
el.style.position = 'relative';
// 插入到目标元素
insertDom(el, el);
});
} else {
el.instance.visible = false;
el.style.position = 'static';
el.mask && el.mask.parentNode && el.mask.parentNode.removeChild(el.mask);
}
};
// 插入到目标元素
const insertDom = (parent, el) => {
parent.appendChild(el.mask);
};
export default {
// 第一次绑定到元素时调用
mounted(el, binding) {
// 用一个变量接住mask实例
el.instance = maskInstance;
el.mask = maskInstance.$el;
el.maskStyle = {};
binding.value && toggleLoading(el, binding);
},
// 所在组件的 VNode 更新时调用--比较更新前后的值
updated(el, binding) {
if (binding.oldValue !== binding.value) {
toggleLoading(el, binding);
}
},
// 指令与元素解绑时调用
unmounted(el) {
el.instance = null;
el.mask = null;
el.maskStyle = null;
},
};
- index.js
/**在Vue 3中,全局指令的注册需要使用app.directive方法,
* 而不再需要在Vue上直接调用。在install方法中,
* app参数代表Vue应用的实例,通过调用app.directive来注册全局指令。
* 另外,由于Vue 3的模块化系统改变,导入Vue的方式也有所不同,
* 不再需要import Vue from 'vue',
* 而是直接传递Vue应用的实例作为参数。 */
import Loading from './loading'
export default {
install(app) {
app.directive('myLoading', Loading)
}
}
- 在main.js中引用
import DirectiveLoading from '@/utils/loading'
const app = createApp(App)
app.use(DirectiveLoading)
- 在页面使用
<template>
<div v-myLoading="loading"></div>
</template>
<script>
export default {
data() {
return {
loading: false
}
}
}
</script>




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)