你的 Loading
开箱即可用的 loading,
说明:vue3-loading 是一个方便在 Vue 3 项目中使用的加载指示器组件的 npm 插件。它允许您轻松地在项目中添加加载动画,提升用户体验。
目录
- [你的 Loading](#你的 Loading)
- [🌍 安装](#🌍 安装)
-
- [🛹 演示地址:](#🛹 演示地址:)
- [🛹 使用方法](#🛹 使用方法)
- 说明:
- [你的 Pinia 加密插件](#你的 Pinia 加密插件)
-
- [🌍 安装](#🌍 安装)
- [🛹 使用方法](#🛹 使用方法)
- [🤖 加密和解密](#🤖 加密和解密)
🌍 安装
javascript
npm install vue3-loading-plug
🛹 演示地址:
http://project.webcats.cn/bx/43924/16191
🛹 使用方法
说明:
内置两种loading 【可自行配置】
Loading 是 大loading 可以用于刷新项目页面、路由跳转 。在路由中引入一次 即可全局生效,极简配置
smallLoading 是小圆圈 loading,一般用于接口请求展示。可以请求拦截器中开启,全局接口生效,极简配置
在你的主应用程序入口文件(例如 main.js)中,导入并使用 loading :
javascript
import Loading from "vue3-loading-plug";
app.use(Loading).mount("#app");
如果是 ts 请在 global.d.ts 加入 类型
javascript
declare module "vue3-loading-plug";
router
javascript
router.beforeEach((to, from, next) => {
if (to.meta.loading) app.config.globalProperties.$Loading.showLoading();
next();
});
router.afterEach((to) => {
if (to.meta.loading) app.config.globalProperties.$Loading.hideLoading();
});
scrvies
javascript
// 请求拦截器
service.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么?
app.config.globalProperties.$smallLoading.showLoading();
return config;
},
(error) => {
// 对请求错误做些什么?
app.config.globalProperties.$smallLoading.hideLoading();
return Promise.reject(error);
}
);
// 封装错误提示函数 (Token过期、网络链接错误等)
const tipError = (value: string, title: string) => {
ElMessageBox.alert(value, title, {
confirmButtonText: "重新登录",
type: "warning",
}).then(() => {
// Session.clear(); // 清除临时缓存
// 清除cookie
document.cookie.split(";").forEach(fnction (c) {
document.cookie = c
.replace(/^ +/, "")
.replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
});
window.location.reload(); // 刷新页面
});
};
// 响应拦截器
service.interceptors.response.use(
(response) => {
// 对响应数据做点什么? 这里只返回成功响应数据!
app.config.globalProperties.$smallLoading.hideLoading();
return response.data;
},
(error) => {
// 对响应错误数据做点什么?这里只显示错误消息!
app.config.globalProperties.$smallLoading.hideLoading();
/*
axios.isCancel(error) 是 Axios 库中的一个方法,用于判断一个错误对象是否是由于请求取消导致的。
当使用 axios.CancelToken 取消请求时,会抛出一个带有一个 message 属性的错误对象。
axios.isCancel(error) 的作用就是判断这个错误对象的类型,如果是由请求取消导致的错误,则返回 true,否则返回 false。
console.log('打印cancelToken.cancel('xxx')传入来的值', error.message);
*/
if (axios.isCancel(error)) {
ElMessage.error(error.message); // 显示错误消息
} else {
// 不是由请求取消导致的错误
let errorMessage; // 错误提示变量
const statusData = error.response?.data; // 错误data数据
const describeForNameMap = [
[
() => error.message.indexOf("timeout") !== -1,
() => (errorMessage = "网络超时 🤖"),
],
[
() => error.message === "Network Error",
() => (errorMessage = "网络连接错误 🤪"),
],
[
() => statusData.code === 100010011,
() => {
// 100010011 token过期
errorMessage = statusData.message;
tipError(errorMessage, "登录过期");
},
],
// 否则 显示错误消息
[() => statusData, () => (errorMessage = statusData.message)],
];
// 获取符合条件的子数组
const getDescribe = describeForNameMap.find((item) => item[0]());
// 执行子数组中的函数
getDescribe && getDescribe[1]();
ElMessage.error(errorMessage); // 显示错误消息
}
}
);
// 导出 service将其命名为axios , 同时还导出了一个名为cancelToken的变量(取消请求)
export { service as axios, cancelToken };
你的 Pinia 加密插件
你的 Pinia 加密插件是一个基于 Pinia 的实用工具,用于在 Vue.js 应用程序中加密和解密敏感数据。它提供了一种简单且安全的方式来保护你的数据。
🌍 安装
你可以使用 npm 或 yarn 安装插件:
javascript
pnpm i vue3-encryption-plugin
🛹 使用方法
在你的主应用程序入口文件(例如 main.js)中,导入并使用 Pinia store 以及加密插件:
javascript
// main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import EncryptionPlugin from "vue3-encryption-plugin";
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
// 注册加密插件并提供自定义的密钥(可选)例如,随机的字符串
app.use(EncryptionPlugin, { key: "your-custom-secret-key" });
app.mount("#app");
🤖 加密和解密
一旦你设置了插件,你就可以在组件中使用 $encrypt 和 $decrypt 方法:
第一种: getCurrentInstance()
javascript
<!-- YourComponent.vue -->
import { getCurrentInstance } from 'vue';
setup(){
// 获取当前组件的上下文,下面两种方式都能获取到组件的上下文。
const { ctx } = getCurrentInstance(); // 方式一,这种方式只能在开发环境下使用,生产环境 下的ctx将访问不到
const { proxy }: any = getCurrentInstance(); // 方式二,此方法在开发环境以及生产环境下都能到组件上下文对象(推荐)
// ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
proxy.$attrs
proxy.$data
proxy.$el
proxy.$emit
proxy.$forceUpdate
proxy.$nextTick
proxy.$options
proxy.$parent
proxy.$props
proxy.$refs
proxy.$root
proxy.$slots
proxy.$watch
}
function handClick() {
console.log(
"!这里输出 🚀 ==>:",
proxy.$encryptionPlugin.encryptData({ name: "zk", age: 26})
);
console.log(
"!这里输出 🚀 ==>:",
proxy.$encryptionPlugin.decryptData(
"U2FsdGVkX1/PBDHn2pyLPAf6DmolvylM2QEIDhcf5I3WQWhOh19eos0uZfdbzdDP"
)
);
}
第二种 injict (推荐)
1:src / types / global.d.ts 定义类型
js
// 加密解密
declare interface EncryptionPlugin {
encryptData: <T>(data: T) => string;
decryptData: <T>(encryptedData: string) => T;
}
如果你使用 eslint 请在 .eslintrc.cjs 文件中添加
javascript
globals: {
// 以下是全局变量 eslint 不会报'EncryptionPlugin' is not defined.eslint (no-undef)
EncryptionPlugin: "readonly",
$encryptionPlugin: "readonly",
},
2: 页面使用
javascript
<script setup lang="ts">
import { inject } from 'vue';
// 使用 inject 函数获取 encryptionPlugin
const encryptionPlugin = inject("encryptionPlugin") as EncryptionPlugin;
function handClick() {
// 现在你可以在你的组件中使用 encryptData 和 decryptData 方法了
const encryptedData = encryptionPlugin.encryptData("Hello World");
const decryptedData = encryptionPlugin.decryptData(encryptedData);
console.log("加密 🚀 ==>:", encryptedData);
console.log("解密 🚀 ==>:", decryptedData);
}
</script>