vue项目未加载完成前显示loading...

场景：vue项目加载时，由于各种原因可能会白屏一会再显示页面解决方法：在index.html里面加入loading的元素，让loading元素显示，让app元素隐藏// index.html<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-

碳酸饮料

4223人浏览 · 2022-02-17 17:50:12

碳酸饮料 · 2022-02-17 17:50:12 发布

场景：vue项目加载时，由于各种原因可能会白屏一会再显示页面
解决方法：在index.html里面加入loading的元素，让loading元素显示，让app元素隐藏

// index.html
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <link rel="stylesheet" href="<%= BASE_URL %>styles/base.css">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <div id="mainLoading">
    <div class="ddr ddr1"></div>
    <div class="ddr ddr2"></div>
    <div class="ddr ddr3"></div>
    <div class="ddr ddr4"></div>
    <div class="ddr ddr5"></div>
  </div>
  <div id="app"></div>
</body>

// loading样式 public > styles > base.css
#mainLoading {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mainLoading .ddr {
  width: 8px;
  height: 100px;
  float: left;
  margin: 2px;
  background-color: #4890FF;
  animation: loading 1s infinite ease-in-out; /*animation：动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/
}
#mainLoading .ddr2 {
  animation-delay: -0.9s; /*定义开始执行的地方，负号表示直接从第900ms开始执行*/
}
#mainLoading .ddr3 {
  animation-delay: -0.8s;
}
#mainLoading .ddr4 {
  animation-delay: -0.7s;
}
#mainLoading .ddr5 {
  animation-delay: -0.6s;
}
@keyframes loading {
  0%,
  40%,
  100% {
    /*定义每帧的动作*/
    -webkit-transform: scaleY(0.5);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}

// App.vue
export default {
	mounted() {
    	// 关闭loading
    	document.getElementById('mainLoading').style.display = 'none';
	},
}

// 如果涉及到微前端，跳转到子应用时可进行如下处理（微前端框架：qiankun）
registerMicroApps(apps, {
  beforeLoad: () => {
    // 加载子应用 开启loading
    document.getElementById('mainLoading').style.display = 'flex';
  },
  afterMount: () => {
    // 子应用加载完毕 关闭loading
    document.getElementById('mainLoading').style.display = 'none';
  }
});

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^