网站建设需求文件,网站模板助手,厦门网站建设 九来,东莞网站建设纸品包装使用 Vue 创建一个简单的 Loading 动画
1. 开始之前
确保
正确安装了 Vue 3知道如何启动一个新的 Vue 项目#xff08;或在项目中使用Vue#xff09;了解 Vue 3 的 Composition API#xff08;本文将使用#xff09;
2. 设计组件
该组件应该包含三个部分
控制逻辑旋转…使用 Vue 创建一个简单的 Loading 动画
1. 开始之前
确保
正确安装了 Vue 3知道如何启动一个新的 Vue 项目或在项目中使用Vue了解 Vue 3 的 Composition API本文将使用
2. 设计组件
该组件应该包含三个部分
控制逻辑旋转的圆圈动画或其他任何循环动画进度条动画
2.1 逻辑部分
我使用 Vue 的 onMounted 生命周期钩子来模拟进度。我的策略是如果加载仍在进行则提供虚假的加载进度。
script setup langts
import { ref, onMounted } from vue;
const loading ref(true);
const wid ref(5);// 异步延迟
const sleep (ms: number) new Promise((resolve) setTimeout(resolve, ms));// 为完成加载时提供假进度
onMounted(async () {await sleep(500);if (loading.value) wid.value 20;await sleep(1000);if (loading.value) wid.value 75;await sleep(2000);if (loading.value) wid.value 95;
});// 完成加载时一步到位
document.onreadystatechange async () {// 当文档完全加载完成if (document.readyState complete) {const loadingElement document.getElementById(loading)!;const mainContent document.getElementById(main-container)!;// 停止加载loading.value false;wid.value 100;// 显示正常页面await sleep(1000);loadingElement.style.opacity 0;document.body.style.background ;mainContent.style.display ;// 删除 loading 元素await sleep(1000);loadingElement.remove();}
};
/script2.2 模板部分
templatediv idloading!-- 转动加载 --div classloadhr /hr /hr /hr //div!-- 进度条 --div classprogressdiv classprogress-value :style{ width: wid % }/div/div/div
/template2.3 样式部分 版权声明 版权声明加载动画修改自 Traf 和 Codrin Pavel在 MIT 许可下使用。 效果
