本文介绍了如何在Vue3中使用JavaScript封装一个全局的Loading组件。首先创建myLoad.vue组件，包含显示loading的模板和样式。然后在index.js中导入组件，创建应用实例并挂载到document上，提供show和hide方法控制Loading的显示和隐藏。最后，在main.js中引入并注册全局使用。
第一步
- 在components文件夹中新建myLoad.vue组件
-
<template>
<div class="loading" v-show="msg.show">
<div>{ {msg.title}}</div>
</div>
</template><script>
export default {
props: {
msg: Object,
aaa: Number
}
}
</script><style scoped lang="scss">
.loading {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
div {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 6px 15px;
}
}
</style> -
第二步
- 新建一个index.js文件
最低0.47元/天 解锁文章
扫一扫
1741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
