feat: 自定义指令

src/assets/svgs/directives.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720775807244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8967" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#52B852" p-id="8968"></path><path d="M269.346909 581.236364c-3.584-33.338182-2.338909-65.931636 11.52-101.969455 16.279273-43.869091 46.650182-76.241455 85.655273-101.969454 59.112727-39.924364 124.672-63.220364 192.616727-78.650182A727.528727 727.528727 0 0 1 726.644364 279.272727c12.648727 0 22.690909 2.443636 27.729454 15.429818 5.015273 13.009455 0 21.818182-8.843636 30.894546-27.729455 29.672727-37.806545 67.153455-46.650182 105.879273-11.252364 46.312727-22.737455 94.103273-35.188364 140.683636-3.816727 15.429818-12.660364 29.649455-18.920727 43.869091-37.771636 72.285091-99.490909 105.890909-176.314182 114.967273-36.631273 3.898182-72.96 1.198545-107.182545-14.231273a219.857455 219.857455 0 0 1-32.779637-19.374546c-7.68 19.374545-15.069091 38.749091-26.58909 41.192728a24.005818 24.005818 0 0 1-26.554182-14.219637c-1.163636-3.909818-3.816727-10.309818-2.373818-14.219636 5.015273-29.684364 12.683636-43.869091 17.710545-52.945455 30.370909-61.742545 69.154909-101.213091 116.514909-148.282181 16.965818-16.64 58.612364-50.734545 95.243636-69.841455-61.521455 16.896-123.950545 49.512727-187.35709 106.344727-25.611636 23.051636-39.959273 40.704-43.054546 48.791273l-2.653091-12.986182h-0.034909z" fill="#FFFFFF" p-id="8969"></path></svg>

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;

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",

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"]: "用户设置",

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

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",

src/views/custom-instruction/anti-shake/anti-shake.vue

@@ -0,0 +1,23 @@
+<template>
+  <FillPage>
+    <div class="scope-page">
+      <div class="my-page" v-my-directive="'red'">防抖</div>
+    </div>
+  </FillPage>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.scope-page {
+  box-sizing: border-box;
+  height: 100%;
+  padding: $padding;
+  .my-page {
+    height: 100%;
+    padding: $padding;
+    box-sizing: border-box;
+    background: $color-bg-1;
+  }
+}
+</style>

src/views/custom-instruction/throttle/throttle.vue

@@ -0,0 +1,23 @@
+<template>
+  <FillPage>
+    <div class="scope-page">
+      <div class="my-page">节流</div>
+    </div>
+  </FillPage>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.scope-page {
+  box-sizing: border-box;
+  height: 100%;
+  padding: $padding;
+  .my-page {
+    height: 100%;
+    padding: $padding;
+    box-sizing: border-box;
+    background: $color-bg-1;
+  }
+}
+</style>