当前位置: 首页 > news >正文

电商品牌网站开发运营吉林高端网站建设

电商品牌网站开发运营,吉林高端网站建设,医疗器械监督管理条例,高端建设网站企业目录 你的 Loading🤖 安装🛹 简介苍白请 您移步文档:✈️ 使用方法🛠️ 配置 loading 类型🎲 定制 loading 色彩 💡 注意事项 前期回顾 你的 Loading 开箱即可用的 loading, 说明:vu…

目录

  • 你的 Loading
    • 🤖 安装
    • 🛹 简介苍白请 您移步文档:
    • ✈️ 使用方法
      • 🛠️ 配置 loading 类型
      • 🎲 定制 loading 色彩
    • 💡 注意事项

请添加图片描述 前期回顾

你的 Loading

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

🤖 安装

npm install vue3-loading-plug

or

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()();
);

💡 注意事项

这个插件使用了动态导入(import(‘xx.vue’))和 Map 来提高性能,因此需要一个支持这些特性的环境。如果你的环境不支持这些特性,你可能需要使用 polyfill 来提供这些特性。

http://mrfarshtey.net/news/518/

相关文章: