发布于2022-11-19 06:35 阅读(1121) 评论(0) 点赞(29) 收藏(1)
在开发的过程中,点击提交按钮,或者是一些其它场景总会遇到loading加载框,PC的一些ui库也没有这样的加载框,无法满足业务需求,因此可以自己自定义一个,实现过程如下。
自定义组件 loading.vue(图片放在文末,自行右键另存为)
<template> <div class="loading" v-show="msg.show"> <div class="load-box"> <img src="@/assets/img/load.png"> <!--<img src="@/assets/img/loading_white.png">--> <span>{{msg.title}}</span> </div> </div> </template> <script> export default { name: 'loading', props: { msg: Object, } } </script> <style scoped lang="scss"> .loading { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 9999; .load-box { background-color: rgba(0, 0, 0, .5); width: 100px;height: 100px;border-radius: 5px; box-shadow:0px 1px 15px rgba(0,0,0, .5);color: #fff; display: flex;flex-direction: column;align-items: center; justify-content: center;letter-spacing: .8px; font-size: 13px; img{ width: 30px;margin-bottom: 8px; -webkit-animation:rotate .8s linear infinite; } } } @keyframes rotate{ to{ transform: rotate(360deg); } } </style>
utils/loading.js
创建封装js控制显示和隐藏,以及需要显示的文字
import { createApp, reactive } from 'vue' import myLoad from '@/components/Loading/loading.vue' const msg = reactive({ show: false, title: '加载中...' }) const $loading = createApp(myLoad, {msg}).mount(document.createElement('div')) const load = { show(title: any = msg.title) { // 控制显示loading的方法 msg.show = true msg.title = title document.body.appendChild($loading.$el) }, hide() { // 控制loading隐藏的方法 msg.show = false } } export { load }
页面使用
import { load } from '@/utils/loading.js';
// 在需要使用时调用show方法
// 例如在指定api调用,或者其他耗时操作时打开loading
// 不传参默认为 加载中...
load.show();
load.show('登录中...');
//在加载完成时关闭
load.hide();
图片右击另存为即可,但是这里有水印,大家也可以去图标库找其它的加载图标代替,效果也是一样的
原文链接:https://blog.csdn.net/qq_43106047/article/details/126262917
作者:哦八戒八戒
链接:http://www.qianduanheidong.com/blog/article/455451/5ca47a14c9b4486baca2/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!