在vue2项目中添加加载动画

卡布鲁大怪兽

于 2024-08-10 17:59:39 发布

阅读量253

点赞数 3

文章标签：前端 javascript vue.js css

本文链接：https://blog.csdn.net/YangWenYu_lala/article/details/141094032

版权

添加

找到项目中public文件夹下的 index.html

在body中添加一个模块


<body>
  <div id="app">
  </div>
  <div id="loader-wrapper"
    <div class="loader">
        //加载动画的内容
    </div>
  </div>
</body>

把需要的样式写到index.html 页面中或者引入外链css文件

隐藏

在vue项目中main.js文件中底部


new Vue({
  router,
  store,
  render: (h) => h(App),
  mounted() {
    //初始化完成后
    // 用JS代码 延迟 隐藏加载模块
    setTimeout(() => {
      const loaderWrapper = document.getElementById("loader-wrapper");
      if (loaderWrapper) {
        loaderWrapper.style.display = "none";
      }
      // Vue 应用的其他初始化逻辑
    }, 1000); // 延迟时间，可根据实际需求调整
  },
}).$mount("#app");