自学内容网 自学内容网
自学内容网 > 正文

vue-自定义加载界面v-loading

🕗 发布于 2024-10-10 19:45 前端  javascript  开发语言  

在网络请求中，页面会出现空白，要使页面好看点，通常页面会出现一些加载页面

1.准备一个伪类元素需要，用伪类元素给加载界面装上蒙层

.loading:before{
  content:'';
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background: #fff url('./R-C.gif') no-repeat center;
}

2.当页面加载完成后，关闭这个类

3.当多次使用这个时，可以封装这个指令

 directives:{
        loading:{
          inserted(el,binding){
            binding.value ?  el.classList.add('loading'): el.classList.remove('loading')
          },
           update(el,binding){
            binding.value ?  el.classList.add('loading'): el.classList.remove('loading')
          }
        }
  }

 


原文地址：https://blog.csdn.net/Kevin7_35Durant/article/details/142790032

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024