From 6d901938d5d91e3275c760d5952f7ad0ae4f9114 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Fri, 12 Jul 2024 18:30:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8C=87?=
=?UTF-8?q?=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/svgs/directives.svg | 1 +
src/directives/index.ts | 21 ++++++++
src/directives/modules/anti-shake.ts | 0
src/lang/modules/enUS.ts | 3 ++
src/lang/modules/zhCN.ts | 3 ++
src/main.ts | 10 +++-
src/router/route.ts | 49 +++++++++++++++++++
.../anti-shake/anti-shake.vue | 23 +++++++++
.../custom-instruction/throttle/throttle.vue | 23 +++++++++
9 files changed, 131 insertions(+), 2 deletions(-)
create mode 100644 src/assets/svgs/directives.svg
create mode 100644 src/directives/index.ts
create mode 100644 src/directives/modules/anti-shake.ts
create mode 100644 src/views/custom-instruction/anti-shake/anti-shake.vue
create mode 100644 src/views/custom-instruction/throttle/throttle.vue
diff --git a/src/assets/svgs/directives.svg b/src/assets/svgs/directives.svg
new file mode 100644
index 0000000..dc0be15
--- /dev/null
+++ b/src/assets/svgs/directives.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/directives/index.ts b/src/directives/index.ts
new file mode 100644
index 0000000..c260a30
--- /dev/null
+++ b/src/directives/index.ts
@@ -0,0 +1,21 @@
+import { Directive } from "vue";
+
+const myDirective: Directive = {
+ beforeMount(el, binding) {
+ el.style.color = binding.value;
+ }
+};
+
+// 定义安装函数
+// install 函数是一个对象中的方法，其作用是将一系列指令对象安装到 Vue 应用实例中，它自带两个参数：app 和 options
+// app就是vue实例，options则是安装函数的参数(可选)
+// install 方法的定义就插件对象，install 方法会在引入插件时自动被 vue 调用，并传参 vue 实例和 options
+const directives = {
+ install(app: any, options?: any) {
+ // 将一系列自定义指令对象安装到 Vue 应用实例中
+ app.directive("my-directive", myDirective);
+ }
+};
+
+// 导出安装函数
+export default directives;
diff --git a/src/directives/modules/anti-shake.ts b/src/directives/modules/anti-shake.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/lang/modules/enUS.ts b/src/lang/modules/enUS.ts
index 6146845..790c93d 100644
--- a/src/lang/modules/enUS.ts
+++ b/src/lang/modules/enUS.ts
@@ -22,6 +22,9 @@ export default {
["third-menu-7"]: "third-menu-7",
["third-menu-8"]: "third-menu-8",
["third-menu-9"]: "third-menu-9",
+ ["custom-instruction"]: "custom instruction",
+ ["anti-shake"]: "anti shake",
+ ["throttle"]: "throttle",
["personal-center"]: "personal center",
["userinfo"]: "userinfo",
["user-settings"]: "user settings",
diff --git a/src/lang/modules/zhCN.ts b/src/lang/modules/zhCN.ts
index 88547ce..2dbd4ed 100644
--- a/src/lang/modules/zhCN.ts
+++ b/src/lang/modules/zhCN.ts
@@ -22,6 +22,9 @@ export default {
["third-menu-7"]: "三级菜单-7",
["third-menu-8"]: "三级菜单-8",
["third-menu-9"]: "三级菜单-9",
+ ["custom-instruction"]: "自定义指令",
+ ["anti-shake"]: "防抖",
+ ["throttle"]: "节流",
["personal-center"]: "个人中心",
["userinfo"]: "用户信息",
["user-settings"]: "用户设置",
diff --git a/src/main.ts b/src/main.ts
index 6a832ff..3b65d1c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,6 +9,8 @@ import router from "@/router/index";
import pinia from "@/store/index";
// arco-css
import "@arco-design/web-vue/dist/arco.css";
+// vchart-arco-theme 主题关联-黑暗模式
+import { initVChartArcoTheme } from "@visactor/vchart-arco-theme";
// 额外引入图标库
import ArcoVueIcon from "@arco-design/web-vue/es/icon";
// 注册全局svg
@@ -17,12 +19,15 @@ import "virtual:svg-icons-register";
import i18n from "@/lang/index";
// 引入字体
import "@/assets/fonts/fonts.scss";
-// vchart-arco-theme 主题关联-黑暗模式
-import { initVChartArcoTheme } from "@visactor/vchart-arco-theme";
+// 引入自定义指令
+import directives from "@/directives/index";
initVChartArcoTheme();
const app = createApp(App);
+// app.use(plugin, options)
+// 其中 plugin 表示要传递的插件对象， options 参数是可选的，表示选项配置
+
app.use(ArcoVue, {
componentPrefix: "arco"
});
@@ -30,4 +35,5 @@ app.use(pinia);
app.use(ArcoVueIcon);
app.use(router);
app.use(i18n);
+app.use(directives);
app.mount("#app");
diff --git a/src/router/route.ts b/src/router/route.ts
index 466a3a7..6fc57e8 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -272,6 +272,55 @@ export const dynamicRoutes: RouteRecordRaw[] = [
}
]
},
+ {
+ path: "/custom-instruction",
+ name: "custom-instruction",
+ redirect: "/custom-instruction/anti-shake",
+ meta: {
+ title: "custom-instruction",
+ hide: false,
+ keepAlive: true,
+ affix: false,
+ link: "",
+ iframe: false,
+ roles: ["admin"],
+ svgIcon: "directives"
+ },
+ children: [
+ {
+ path: "/custom-instruction/anti-shake",
+ name: "anti-shake",
+ component: () => import("@/views/custom-instruction/anti-shake/anti-shake.vue"),
+ meta: {
+ title: "anti-shake",
+ hide: false,
+ keepAlive: true,
+ affix: false,
+ link: "",
+ iframe: false,
+ roles: ["admin"],
+ icon: "icon-menu"
+ },
+ children: []
+ },
+ {
+ path: "/custom-instruction/throttle",
+ name: "throttle",
+ component: () => import("@/views/custom-instruction/throttle/throttle.vue"),
+ meta: {
+ title: "throttle",
+ hide: false,
+ keepAlive: true,
+ affix: false,
+ link: "",
+ iframe: false,
+ roles: ["admin"],
+ icon: "icon-menu"
+ },
+ children: []
+ }
+ ]
+ },
{
path: "/personal-center",
name: "personal-center",
diff --git a/src/views/custom-instruction/anti-shake/anti-shake.vue b/src/views/custom-instruction/anti-shake/anti-shake.vue
new file mode 100644
index 0000000..f7f97fa
--- /dev/null
+++ b/src/views/custom-instruction/anti-shake/anti-shake.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/views/custom-instruction/throttle/throttle.vue b/src/views/custom-instruction/throttle/throttle.vue
new file mode 100644
index 0000000..3c33d43
--- /dev/null
+++ b/src/views/custom-instruction/throttle/throttle.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+