Vue3 + Ts实现NPM插件 - 定制loading-编程知识

Vue3 + Ts实现NPM插件 - 定制loading

你的 Loading

开箱即可用的 loading，
说明：vue3-loading 是一个方便在 Vue 3 项目中使用的加载指示器组件的 npm 插件。它允许您轻松地在项目中添加加载动画，提升用户体验。

🤖 安装

npm install vue3-loading-plug

pnpm install vue3-loading-plug

🛹 简介苍白请您移步文档：

一键轻松看-尝试刷新页面将自动随机展示 loading
一键快阅文档

✈️ 使用方法

📒 说明：

内置两大类 loading 【可自行配置】

一、 Loading 是大 loading 可以用于刷新项目页面、路由跳转。在路由中引入一次即可全局生效，极简配置

二、smallLoading 是小圆圈带加载进度 loading，一般用于接口请求展示。可以请求拦截器中开启，全局接口生效，极简配置

在你的主应用程序入口文件（例如 main.js）中，导入并使用 loading ：

import Loading from "vue3-loading-plug";
app.use(Loading).mount("#app");

🤖 高级用法

🛠️ 配置 loading 类型

你可以在安装插件时传入一个配置对象。

这个配置对象有一个 loadingType 属性，这个属性决定了使用哪种类型的 loading 组件。

如果你不传入 loadingType，那么将会随机选择一个 loading 组件。

app.use(Loading, {loadingType: 2  // 使用第二种类型的loading组件
});

🎲 定制 loading 色彩

我们目前更新了 7 款 loading 组件，每一款都有自己的默认颜色,也可以如下自定制。

这个配置对象还有一个 customized 属性，这个属性的值决定了 loading 组件的颜色展示和遮罩的色彩呈现。（它们都是非必填）

app.use(Loading, {loadingType: 1,customized: {top: "#54038a",left: "#05b631",right: "#eeaff7"},
});

app.use(Loading, {loadingType: 2,/*我定制了loading颜色为红色、遮罩层为绿色通常我们不需要定制mask、loading ，颜色都具备默认值*/customized: { color: "red", mask: "green" },
});

app.use(Loading, {loadingType: 3,customized: { mask: "rgba(126, 128, 117, 0.5)" },
});

app.use(Loading, {loadingType: 4,customized: { ball: "red", dot: "#fff", bar: "#000" },
});

app.use(Loading, {loadingType: 5,customized: { color: "#f4038a" },
});

app.use(Loading, {loadingType: 6,customized: { color: "red" },
});

app.use(Loading, {loadingType: 7,customized: { color: "#212121" },
});

如果是 ts 请在 global.d.ts 加入类型

declare module "vue3-loading-plug";

router

const hideLoading = () => app.config.globalProperties.$Loading?.hideLoading;
const showLoading = () => app.config.globalProperties.$Loading?.showLoading();router.beforeEach((to, from, next) => {if (to.meta.loading) showLoading();next();
});router.afterEach((to) => {// 第二个参数为关闭loading的时间，无参即是根据上下文环境300ms关闭if (to.meta.loading) hideLoading()(400);
});

scrvies

const hideLoading = () => app.config.globalProperties.$smallLoading.hideLoading;
const showLoading = () =>app.config.globalProperties.$smallLoading.showLoading();
let onProgress = () => app.config.globalProperties.$smallLoading.onProgress;// 请求拦截器
service.interceptors.request.use((config) => {// 在发送请求之前做些什么？showLoading();config.onDownloadProgress = (progressEvent: any) => {let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent?.total);onProgress()(percentCompleted);};return config;},(error) => {// 对请求错误做些什么？// 第二个括号参数为空时，200ms后隐藏loading, (为了展示loading进度100%效果)hideLoading()();// hideLoading()(true); // 传入true时，不会延迟隐藏loadingreturn Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response) => {// 对响应数据做点什么？ 这里只返回成功响应数据！hideLoading()();return response.data;},(error) => hideLoading()();
);