From 99d67ed1f7a781c30524f96220a9dd40ed6e5793 Mon Sep 17 00:00:00 2001
From: liaohui <276557421@qq.com>
Date: Tue, 3 Sep 2024 11:32:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0ReDrawer=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                               |   3 +-
 locales/zh-CN.yaml                            |   1 +
 src/router/modules/components.ts              |   8 +
 src/views/components/drawer/form.vue          |  47 ++
 src/views/components/drawer/formPrimitive.vue |  22 +
 src/views/components/drawer/index.vue         | 502 ++++++++++++++++++
 6 files changed, 582 insertions(+), 1 deletion(-)
 create mode 100644 src/views/components/drawer/form.vue
 create mode 100644 src/views/components/drawer/formPrimitive.vue
 create mode 100644 src/views/components/drawer/index.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index 3793277b1..755b99860 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -83,6 +83,7 @@ menus:
   pureFive: "500"
   pureComponents: Components
   pureDialog: Dialog
+  pureDrawer: Drawer
   pureMessage: Message Tips
   pureVideo: Video
   pureSegmented: Segmented
@@ -233,4 +234,4 @@ login:
   purePassWordRuleReg: The password format should be any combination of 8-18 digits
   purePassWordSureReg: Please enter confirm password
   purePassWordDifferentReg: The two passwords do not match!
-  purePassWordUpdateReg: Password has been updated
\ No newline at end of file
+  purePassWordUpdateReg: Password has been updated
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 7be27a8ec..bf3bf5a33 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -83,6 +83,7 @@ menus:
   pureFive: "500"
   pureComponents: 组件
   pureDialog: 函数式弹框
+  pureDrawer: 函数式抽屉
   pureMessage: 消息提示
   pureVideo: 视频
   pureSegmented: 分段控制器
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 830cea5d9..053840169 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -18,6 +18,14 @@ export default {
         title: $t("menus.pureDialog")
       }
     },
+    {
+      path: "/components/drawer",
+      name: "DrawerPage",
+      component: () => import("@/views/components/drawer/index.vue"),
+      meta: {
+        title: $t("menus.pureDrawer")
+      }
+    },
     {
       path: "/components/message",
       name: "Message",
diff --git a/src/views/components/drawer/form.vue b/src/views/components/drawer/form.vue
new file mode 100644
index 000000000..f5383d6a4
--- /dev/null
+++ b/src/views/components/drawer/form.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+// 声明 props 类型
+export interface FormProps {
+  formInline: {
+    user: string;
+    region: string;
+  };
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({ user: "", region: "" })
+});
+
+// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
+// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
+// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
+// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
+// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
+const newFormInline = ref(props.formInline);
+</script>
+
+<template>
+  <el-form :model="newFormInline">
+    <el-form-item label="姓名">
+      <el-input
+        v-model="newFormInline.user"
+        class="!w-[220px]"
+        placeholder="请输入姓名"
+      />
+    </el-form-item>
+    <el-form-item label="城市">
+      <el-select
+        v-model="newFormInline.region"
+        class="!w-[220px]"
+        placeholder="请选择城市"
+      >
+        <el-option label="上海" value="上海" />
+        <el-option label="浙江" value="浙江" />
+        <el-option label="深圳" value="深圳" />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
diff --git a/src/views/components/drawer/formPrimitive.vue b/src/views/components/drawer/formPrimitive.vue
new file mode 100644
index 000000000..af4bc34c5
--- /dev/null
+++ b/src/views/components/drawer/formPrimitive.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+
+// 声明 props 类型
+export interface FormProps {
+  data: string;
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  data: () => ""
+});
+
+// 使用 vueuse 的双向绑定工具
+const emit = defineEmits(["update:data"]);
+const data = useVModel(props, "data", emit);
+</script>
+
+<template>
+  <el-input v-model="data" class="!w-[220px]" placeholder="请输入内容" />
+</template>
diff --git a/src/views/components/drawer/index.vue b/src/views/components/drawer/index.vue
new file mode 100644
index 000000000..c40f62898
--- /dev/null
+++ b/src/views/components/drawer/index.vue
@@ -0,0 +1,502 @@
+<script setup lang="tsx">
+import {
+  addDrawer,
+  closeDrawer,
+  closeAllDrawer,
+  updateDrawer
+} from "@/components/ReDrawer/index";
+import { cloneDeep, debounce } from "@pureadmin/utils";
+import { message } from "@/utils/message";
+import { createVNode, h, ref } from "vue";
+import formPrimitive from "./formPrimitive.vue";
+import forms, { type FormProps } from "./form.vue";
+
+function onBaseClick() {
+  addDrawer({
+    title: "基础用法",
+    contentRenderer: () => <p>抽屉内容-基础用法</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
+  });
+}
+
+function onModalClick() {
+  addDrawer({
+    title: "无背景遮罩层",
+    modal: false,
+    contentRenderer: () => <p>抽屉内容-无背景遮罩层</p>
+  });
+}
+
+// 添加 600ms 防抖
+const onoOpenDelayClick = debounce(
+  () =>
+    addDrawer({
+      title: "延时2秒打开抽屉",
+      openDelay: 2000 - 600,
+      contentRenderer: () => <p>抽屉内容-延时2秒打开抽屉</p>
+    }),
+  600
+);
+
+function onCloseDelayClick() {
+  addDrawer({
+    title: "延时2秒关闭抽屉",
+    closeDelay: 2000,
+    contentRenderer: () => <p>抽屉内容-延时2秒关闭抽屉</p>
+  });
+}
+
+function onShowCloseClick() {
+  addDrawer({
+    title: "不显示右上角关闭按钮图标",
+    showClose: false,
+    contentRenderer: () => <p>抽屉内容-不显示右上角关闭按钮图标</p>
+  });
+}
+
+function onBeforeCloseClick() {
+  addDrawer({
+    title: "禁止通过键盘ESC关闭",
+    closeOnPressEscape: false,
+    contentRenderer: () => <p>抽屉内容-禁止通过键盘ESC关闭</p>
+  });
+}
+
+function onCloseOnClickModalClick() {
+  addDrawer({
+    title: "禁止通过点击modal关闭",
+    closeOnClickModal: false,
+    contentRenderer: () => <p>抽屉内容-禁止通过点击modal关闭</p>
+  });
+}
+
+function onHideFooterClick() {
+  addDrawer({
+    title: "隐藏底部取消、确定按钮",
+    hideFooter: true,
+    contentRenderer: () => <p>抽屉内容-隐藏底部取消、确定按钮</p>
+  });
+}
+
+function onHeaderRendererClick() {
+  addDrawer({
+    title: "自定义头部",
+    showClose: false,
+    headerRenderer: ({ close, titleId, titleClass }) => (
+      // jsx 语法
+      <div class="flex flex-row justify-between">
+        <h4 id={titleId} class={titleClass}>
+          自定义头部
+        </h4>
+        <el-button type="danger" onClick={close}>
+          关闭
+        </el-button>
+      </div>
+    ),
+    contentRenderer: () => <p>抽屉内容-自定义头部</p>
+  });
+}
+
+function onFooterRendererClick() {
+  addDrawer({
+    title: "自定义底部",
+    footerRenderer: ({ options, index }) => (
+      <el-button onClick={() => closeDrawer(options, index)}>
+        {options.title}-{index}
+      </el-button>
+    ),
+    contentRenderer: () => <p>抽屉内容-自定义底部</p>
+  });
+}
+
+function onFooterButtonsClick() {
+  addDrawer({
+    title: "自定义底部按钮",
+    footerButtons: [
+      {
+        label: "按钮1",
+        size: "small",
+        type: "success",
+        btnClick: ({ drawer: { options, index }, button }) => {
+          console.log(options, index, button);
+          closeDrawer(options, index);
+        }
+      },
+      {
+        label: "按钮2",
+        text: true,
+        bg: true,
+        btnClick: ({ drawer: { options, index }, button }) => {
+          console.log(options, index, button);
+          closeDrawer(options, index);
+        }
+      },
+      {
+        label: "按钮3",
+        size: "large",
+        type: "warning",
+        btnClick: ({ drawer: { options, index }, button }) => {
+          console.log(options, index, button);
+          closeDrawer(options, index);
+        }
+      }
+    ],
+    contentRenderer: () => <p>抽屉内容-自定义底部按钮</p>
+  });
+}
+
+function onOpenClick() {
+  addDrawer({
+    title: "打开后的回调",
+    open: ({ options, index }) => message({ options, index } as any),
+    contentRenderer: () => <p>抽屉内容-打开后的回调</p>
+  });
+}
+
+function onCloseCallBackClick() {
+  addDrawer({
+    title: "关闭后的回调",
+    closeCallBack: ({ options, index, args }) => {
+      console.log(options, index, args);
+      let text = "";
+      if (args?.command === "cancel") {
+        text = "您点击了取消按钮";
+      } else if (args?.command === "sure") {
+        text = "您点击了确定按钮";
+      } else {
+        text = "您点击了右上角关闭按钮或空白页或按下了esc键";
+      }
+      message(text);
+    },
+    contentRenderer: () => <p>抽屉内容-关闭后的回调</p>
+  });
+}
+
+// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDrawer 函数抽出来 套娃不可取
+function onNestingClick() {
+  addDrawer({
+    title: "嵌套的抽屉",
+    size: "50%",
+    contentRenderer: ({ index }) => (
+      <el-button
+        onClick={() =>
+          addDrawer({
+            title: `第${index + 1}个子抽屉`,
+            size: "40%",
+            contentRenderer: ({ index }) => (
+              <el-button
+                onClick={() =>
+                  addDrawer({
+                    title: `第${index + 1}个子抽屉`,
+                    size: "30%",
+                    contentRenderer: () => (
+                      <>
+                        <el-button round onClick={() => closeAllDrawer()}>
+                          哎呦，你干嘛，赶快关闭所有抽屉
+                        </el-button>
+                      </>
+                    )
+                  })
+                }
+              >
+                点击打开第{index + 1}个子抽屉
+              </el-button>
+            )
+          })
+        }
+      >
+        点击打开第{index + 1}个子抽屉
+      </el-button>
+    )
+  });
+}
+
+// 满足在 contentRenderer 内容区更改抽屉自身属性值的场景
+function onUpdateClick() {
+  const curPage = ref(1);
+  addDrawer({
+    title: `第${curPage.value}页`,
+    contentRenderer: () => (
+      <>
+        <el-button
+          disabled={curPage.value <= 1}
+          onClick={() => {
+            curPage.value -= 1;
+            updateDrawer(`第${curPage.value}页`);
+          }}
+        >
+          上一页
+        </el-button>
+        <el-button
+          onClick={() => {
+            curPage.value += 1;
+            updateDrawer(`第${curPage.value}页`);
+          }}
+        >
+          下一页
+        </el-button>
+      </>
+    )
+  });
+}
+
+// popConfirm 确认框
+function onPopConfirmClick() {
+  addDrawer({
+    size: "30%",
+    title: "popConfirm确认框示例",
+    popConfirm: { title: "是否确认修改当前数据" },
+    contentRenderer: () => <p>点击右下方确定按钮看看效果吧</p>
+  });
+}
+
+// 结合Form表单（第一种方式，抽屉关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
+function onFormOneClick() {
+  addDrawer({
+    size: "30%",
+    title: "结合Form表单（第一种方式）",
+    contentRenderer: () => forms,
+    props: {
+      // 赋默认值
+      formInline: {
+        user: "菜虚鲲",
+        region: "浙江"
+      }
+    },
+    closeCallBack: ({ options, args }) => {
+      // options.props 是响应式的
+      const { formInline } = options.props as FormProps;
+      const text = `姓名：${formInline.user} 城市：${formInline.region}`;
+      if (args?.command === "cancel") {
+        // 您点击了取消按钮
+        message(`您点击了取消按钮，当前表单数据为 ${text}`);
+      } else if (args?.command === "sure") {
+        message(`您点击了确定按钮，当前表单数据为 ${text}`);
+      } else {
+        message(
+          `您点击了右上角关闭按钮或空白页或按下了esc键，当前表单数据为 ${text}`
+        );
+      }
+    }
+  });
+}
+
+// 结合Form表单（第二种方式）h 渲染函数 https://cn.vuejs.org/api/render-function.html#h
+const formInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormInline = cloneDeep(formInline.value);
+function onFormTwoClick() {
+  addDrawer({
+    size: "30%",
+    title: "结合Form表单（第二种方式）",
+    contentRenderer: () =>
+      h(forms, {
+        formInline: formInline.value
+      }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
+      );
+      // 重置表单数据
+      formInline.value = cloneDeep(resetFormInline);
+    }
+  });
+}
+
+// 结合Form表单（第三种方式）createVNode 渲染函数 https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
+const formThreeInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormThreeInline = cloneDeep(formThreeInline.value);
+function onFormThreeClick() {
+  addDrawer({
+    size: "30%",
+    title: "结合Form表单（第三种方式）",
+    contentRenderer: () =>
+      createVNode(forms, {
+        formInline: formThreeInline.value
+      }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
+      );
+      // 重置表单数据
+      formThreeInline.value = cloneDeep(resetFormThreeInline);
+    }
+  });
+}
+
+// 结合Form表单（第四种方式）使用jsx语法
+// 需要注意的是如果 forms 没注册，这里 forms 注册了是因为上面 contentRenderer: () => forms、h(forms) 、createVNode(createVNode) 间接给注册了
+// 如果只使用了jsx语法，如下 `contentRenderer: () => <forms formInline={formFourInline.value} />` 是不会给 forms 组件进行注册的，需要在 `script` 中任意位置（最好是末尾）写上 forms 即可
+// 同理如果在 tsx 文件中，这么使用 `contentRenderer: () => <forms formInline={formFourInline.value} />`，也是不会给 forms 组件进行注册，需要在 return 中写上 forms
+const formFourInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormFourInline = cloneDeep(formFourInline.value);
+function onFormFourClick() {
+  addDrawer({
+    size: "30%",
+    title: "结合Form表单（第四种方式）",
+    contentRenderer: () => <forms formInline={formFourInline.value} />,
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formFourInline.value.user} 城市：${formFourInline.value.region}`
+      );
+      // 重置表单数据
+      formFourInline.value = cloneDeep(resetFormFourInline);
+    }
+  });
+}
+
+// 子组件 prop 为 primitive 类型的 demo
+const formPrimitiveParam = ref("Hello World");
+const resetFormPrimitiveParam = ref(formPrimitiveParam.value);
+function onFormPrimitiveFormClick() {
+  addDrawer({
+    size: "30%",
+    title: "子组件 prop 为 primitive 类型 demo",
+    contentRenderer: () =>
+      h(formPrimitive, {
+        data: formPrimitiveParam.value,
+        "onUpdate:data": val => (formPrimitiveParam.value = val)
+      }),
+    closeCallBack: () => {
+      message(`当前表单内容：${formPrimitiveParam.value}`);
+      // 重置表单数据
+      formPrimitiveParam.value = resetFormPrimitiveParam.value;
+    }
+  });
+}
+
+function onBeforeCancelClick() {
+  addDrawer({
+    title: "点击底部取消按钮的回调",
+    contentRenderer: () => (
+      <p>抽屉内容-点击底部取消按钮的回调（会暂停抽屉的关闭）</p>
+    ),
+    beforeCancel: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
+
+function onBeforeSureClick() {
+  addDrawer({
+    title: "点击底部确定按钮的回调",
+    contentRenderer: () => (
+      <p>
+        抽屉内容-点击底部确定按钮的回调（会暂停抽屉的关闭，经常用于新增、修改抽屉内容后调用接口）
+      </p>
+    ),
+    beforeSure: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
+
+function onSureBtnLoading() {
+  addDrawer({
+    sureBtnLoading: true,
+    title: "点击底部确定按钮可开启按钮动画",
+    contentRenderer: () => <p>抽屉内容-点击底部确定按钮可开启按钮动画</p>,
+    beforeSure: (done, { closeLoading }) => {
+      closeLoading(); // 关闭确定按钮动画，不关闭抽屉
+      // done() // 关闭确定按钮动画并关闭抽屉
+      setTimeout(() => done(), 800);
+    }
+  });
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          二次封装 Element Plus 的
+          <el-link
+            href="https://element-plus.org/zh-CN/component/drawer.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            Drawer
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        href="https://github.com/pure-admin/vue-pure-admin/tree/main/src/views/components/drawer"
+        target="_blank"
+      >
+        代码位置 src/views/components/drawer
+      </el-link>
+    </template>
+    <el-space wrap>
+      <el-button @click="onBaseClick">基础用法</el-button>
+      <el-button @click="onModalClick"> 无背景遮罩层 </el-button>
+      <el-button @click="onoOpenDelayClick"> 延时2秒打开抽屉 </el-button>
+      <el-button @click="onCloseDelayClick"> 延时2秒关闭抽屉 </el-button>
+      <el-button @click="onShowCloseClick">
+        不显示右上角关闭按钮图标
+      </el-button>
+      <el-button @click="onBeforeCloseClick"> 禁止通过键盘ESC关闭 </el-button>
+      <el-button @click="onCloseOnClickModalClick">
+        禁止通过点击modal关闭
+      </el-button>
+      <el-button @click="onHideFooterClick"> 隐藏底部取消、确定按钮 </el-button>
+      <el-button @click="onHeaderRendererClick"> 自定义头部 </el-button>
+      <el-button @click="onFooterRendererClick"> 自定义底部 </el-button>
+      <el-button @click="onFooterButtonsClick"> 自定义底部按钮 </el-button>
+      <el-button @click="onOpenClick"> 打开后的回调 </el-button>
+      <el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
+      <el-button @click="onNestingClick"> 嵌套的抽屉 </el-button>
+      <el-button @click="onUpdateClick"> 更改抽屉自身属性值 </el-button>
+      <el-button @click="onPopConfirmClick">popConfirm确认框</el-button>
+    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button @click="onFormOneClick">
+        结合Form表单（第一种方式）
+      </el-button>
+      <el-button @click="onFormTwoClick">
+        结合Form表单（第二种方式）
+      </el-button>
+      <el-button @click="onFormThreeClick">
+        结合Form表单（第三种方式）
+      </el-button>
+      <el-button @click="onFormFourClick">
+        结合Form表单（第四种方式）
+      </el-button>
+      <el-button @click="onFormPrimitiveFormClick">
+        子组件 prop 为 primitive 类型
+      </el-button>
+    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button @click="onBeforeCancelClick">
+        点击底部取消按钮的回调（会暂停抽屉的关闭）
+      </el-button>
+      <el-button @click="onBeforeSureClick">
+        点击底部确定按钮的回调（会暂停抽屉的关闭，经常用于新增、修改抽屉内容后调用接口）
+      </el-button>
+      <el-button @click="onSureBtnLoading">
+        点击底部确定按钮可开启按钮动画
+      </el-button>
+    </el-space>
+  </el-card>
+</template>