1.修改userCrud 2.添加防抖指令

README.md

@@ -17,3 +17,6 @@ pnpm run dev
 
 代码示例：
 和crud相关代码可以参看hooksDemo.vue (目前不够特别全面，需要什么后续可以在userCrud.ts里面添加)
+
+功能示例：
+1. v-debounce:click防抖。2.按钮权限。v-hasPerm或者checkPerm

src/directive/buttons/index.ts

@@ -0,0 +1,25 @@
+import { Directive, DirectiveBinding } from "vue";
+
+/**
+ * 防抖-立即执行，一秒内只能点击一次
+ */
+export const debounce: Directive = {
+  mounted(el: Element, binding: DirectiveBinding) {
+    let timer: any;
+    let flag = true; //是否执行绑定事件
+    el.addEventListener(binding.arg + "", () => {
+      clearTimeout(timer);
+      if (flag) {
+        binding.value();
+        flag = false;
+      }
+      timer = setTimeout(() => {
+        flag = true;
+      }, 1000);
+    });
+  },
+};
+
+export const throttle: Directive = {
+  // mounted(el: Element, binding: DirectiveBinding) { },
+};

src/directive/index.ts

@@ -1,9 +1,12 @@
 import type { App } from "vue";
 
 import { hasPerm } from "./permission";
+import { debounce } from "./buttons";
 
 // 全局注册 directive
 export function setupDirective(app: App<Element>) {
   // 使 v-hasPerm 在所有组件中都可用
   app.directive("hasPerm", hasPerm);
+
+  app.directive("debounce", debounce);
 }

src/hooks/userCrud.ts

@@ -51,24 +51,16 @@ export const useCrud = (config?: UseCrudConfig) => {
 
   const save = async (config?: UseCrudConfig) => {
     const path = config?.isEdit ? "/update" : "/add";
-    try {
-      const res = await request({
-        url: `${url.value}${path}`,
-        method: "post",
-        data: form.value,
-      });
-      if (res?.data?.code == 200) {
-        Methords.dataList();
-        config?.done && config?.done();
-      } else {
-        ElMessage.error(res?.data?.msg ?? "");
-      }
-    } catch (err) {
-      ElMessage.error("Oops, this is a error message.");
-      // config?.loading && config?.loading();
-    } finally {
-      ElMessage.error("Oops, this is a error message.");
-      // config?.done && config?.done();
+    const res = (await request({
+      url: `${url.value}${path}`,
+      method: "post",
+      data: form.value,
+    })) as any;
+    if (res?.code == 200) {
+      Methords.dataList();
+      config?.done && config?.done();
+    } else {
+      ElMessage.error(res?.msg ?? "");
     }
   };
 

src/plugins/permission.ts

@@ -5,7 +5,7 @@ import NProgress from "@/utils/nprogress";
 
 export function setupPermission() {
   // 白名单路由
-  const whiteList = ["/login"];
+  const whiteList = ["/login", "/demo/hooks"];
 
   router.beforeEach(async (to, from, next) => {
     NProgress.start();

src/views/demo/hooksDemo.vue

@@ -2,6 +2,7 @@
   <div>{{ form }}</div>
   <div>{{ search }}</div>
   <el-button @click="test">测试公共弹窗</el-button>
+  <el-button v-debounce:click="testDebunce">测试防抖截流</el-button>
   <div class="mainContentBox">
     <avue-crud
       ref="crudRef"
@@ -65,6 +66,10 @@ const test = () => {
   tableType.value = tableType.value == 1 ? 2 : 1;
 };
 
+const testDebunce = () => {
+  console.log("执行了事件");
+};
+
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({