Vue3定义加载对象&react自定义加载对象
.loading{width:100%;高度：100%；位置：绝对；顶部：0；左：0；显示：弹性；证明内容：居中；对齐项目：居中；z-指数：9999；.load-box{背景色：rgba(0,0,0,.5);宽度：100px；高度：100px；边界半径：5px；框阴影：0px1px15pxrgba(0,0,0,.5);颜色：#fff；显示：弹性；弹性方向：柱子;对齐项目：居中；证明内容：居中；字母间距：.8px；字体大小：13px；img{宽度：30px;底部边距：8px；-webkit-animation:旋转.8s线性无限；}}}@keyframes旋转{到{变换：旋转（360deg）；}}loading.vue{{msg.title}}
.loading{width:100%;高度：100%；位置：绝对；顶部：0；左：0；显示：弹性；证明内容：居中；对齐项目：居中；z-指数：9999；.load-box{背景色：rgba(0,0,0,.5);宽度：100px；高度：100px；边界半径：5px；框阴影：0px1px15pxrgba(0,0,0,.5);颜色：#fff；显示：弹性；弹性方向：柱子;对齐项目：居中；证明内容：居中；字母间距：.8px；字体大小：13px；img{宽度：30px;底部边距：8px；-webkit-animation:旋转.8s线性无限；}}}@keyframes旋转{到{变换：旋转（360deg）；}}index.jsimport{createApp,reactive}from'vue'importmyLoadfrom'./loading.vue'constmsg=reactive({show:false,title:'加载中...'})const$loading=createApp(myLoad,{msg}).mount(document.createElement('div'))constload={show(title){//控制显示加载的方法msg.show=truetitle?msg.title=title:''document.body.appendChild($loading.$el)},hide(){//控制加载隐藏的方法msg.show=false}}export{load}导入import{load}from"@/components/loading/index.js";load.show('登录中...');setTimeout(()=>{load.hide();},5000);reactloading.jsimportReact,{memo}from"react";import{createRoot}来自"react-dom/client";constLoading=memo(()=>{return( )})constJCLoading={show(){constoWrapper=document.createElement("div")//此处避免重新引入divif(!document.getElementById('loading_dialog')){oWrapper.setAttribute("id","loading_dialog")oWrapper.style.position='absolute'oWrapper.style.top='0'document.body.appendChild(oWrapper)this.wrapperRoot=createRoot(oWrapper)this.wrapperRoot.render(
)}},移除(){console.log(document.getElementById('loading_dialog'))if(document.getElementById('loading_dialog')){document.body.removeChild(document.getElementById('loading_dialog'))}}}exportdefaultJCLoading应用页面importJCLoading来自'../components/loading'JCLoading.show()...JCLoading.remove()
