feat: 新增函数式抽屉组件 (#1183)

* feat: 函数式抽屉组件

* feat: 添加ReDrawer demo

* fix: 组件ReDrawer 增加按钮loading等功能

locales/en.yaml

@@ -83,6 +83,7 @@ menus:
  pureFive: "500"
  pureComponents: Components
  pureDialog: Dialog
+ pureDrawer: Drawer
  pureMessage: Message Tips
  pureVideo: Video
  pureSegmented: Segmented

locales/zh-CN.yaml

@@ -83,6 +83,7 @@ menus:
  pureFive: "500"
  pureComponents: 组件
  pureDialog: 函数式弹框
+ pureDrawer: 函数式抽屉
  pureMessage: 消息提示
  pureVideo: 视频
  pureSegmented: 分段控制器
@@ -233,4 +234,4 @@ login:
  purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
  purePassWordSureReg: 请输入确认密码
  purePassWordDifferentReg: 两次密码不一致!
- purePassWordUpdateReg: 修改密码成功
+ purePassWordUpdateReg: 修改密码成功

src/App.vue

@@ -2,6 +2,7 @@
  <el-config-provider :locale="currentLocale">
  <router-view />
  <ReDialog />
+ <ReDrawer />
  </el-config-provider>
 </template>
 
@@ -10,6 +11,7 @@ import { defineComponent } from "vue";
 import { checkVersion } from "version-rocket";
 import { ElConfigProvider } from "element-plus";
 import { ReDialog } from "@/components/ReDialog";
+import { ReDrawer } from "@/components/ReDrawer";
 import en from "element-plus/es/locale/lang/en";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import plusEn from "plus-pro-components/es/locale/lang/en";
@@ -19,7 +21,8 @@ export default defineComponent({
  name: "app",
  components: {
  [ElConfigProvider.name]: ElConfigProvider,
- ReDialog
+ ReDialog,
+ ReDrawer
  },
  computed: {
  currentLocale() {

src/components/ReDrawer/index.ts

@@ -0,0 +1,64 @@
+import { ref } from "vue";
+import reDrawer from "./index.vue";
+import { useTimeoutFn } from "@vueuse/core";
+import { withInstall } from "@pureadmin/utils";
+import type {
+ EventType,
+ ArgsType,
+ DrawerProps,
+ DrawerOptions,
+ ButtonProps
+} from "./type";
+
+const drawerStore = ref<Array<DrawerOptions>>([]);
+
+/** 打开抽屉 */
+const addDrawer = (options: DrawerOptions) => {
+ const open = () =>
+ drawerStore.value.push(Object.assign(options, { visible: true }));
+ if (options?.openDelay) {
+ useTimeoutFn(() => {
+ open();
+ }, options.openDelay);
+ } else {
+ open();
+ }
+};
+
+/** 关闭抽屉 */
+const closeDrawer = (options: DrawerOptions, index: number, args?: any) => {
+ drawerStore.value[index].visible = false;
+ options.closeCallBack && options.closeCallBack({ options, index, args });
+
+ const closeDelay = options?.closeDelay ?? 200;
+ useTimeoutFn(() => {
+ drawerStore.value.splice(index, 1);
+ }, closeDelay);
+};
+
+/**
+ * @description 更改抽屉自身属性值
+ * @param value 属性值
+ * @param key 属性，默认`title`
+ * @param index 弹框索引（默认`0`，代表只有一个弹框，对于嵌套弹框要改哪个弹框的属性值就把该弹框索引赋给`index`）
+ */
+const updateDrawer = (value: any, key = "title", index = 0) => {
+ drawerStore.value[index][key] = value;
+};
+
+/** 关闭所有弹框 */
+const closeAllDrawer = () => {
+ drawerStore.value = [];
+};
+
+const ReDrawer = withInstall(reDrawer);
+
+export type { EventType, ArgsType, DrawerOptions, DrawerProps, ButtonProps };
+export {
+ ReDrawer,
+ drawerStore,
+ addDrawer,
+ closeDrawer,
+ updateDrawer,
+ closeAllDrawer
+};

src/components/ReDrawer/index.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import {
+ type EventType,
+ type ButtonProps,
+ type DrawerOptions,
+ closeDrawer,
+ drawerStore
+} from "./index";
+import { computed, ref } from "vue";
+import { isFunction } from "@pureadmin/utils";
+
+defineOptions({
+ name: "ReDrawer"
+});
+
+const sureBtnMap = ref({});
+
+const footerButtons = computed(() => {
+ return (options: DrawerOptions) => {
+ return options?.footerButtons?.length > 0
+ ? options.footerButtons
+ : ([
+ {
+ label: "取消",
+ text: true,
+ bg: true,
+ btnClick: ({ drawer: { options, index } }) => {
+ const done = () =>
+ closeDrawer(options, index, { command: "cancel" });
+ if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
+ options.beforeCancel(done, { options, index });
+ } else {
+ done();
+ }
+ }
+ },
+ {
+ label: "确定",
+ type: "primary",
+ text: true,
+ bg: true,
+ popConfirm: options?.popConfirm,
+ btnClick: ({ drawer: { options, index } }) => {
+ if (options?.sureBtnLoading) {
+ sureBtnMap.value[index] = Object.assign(
+ {},
+ sureBtnMap.value[index],
+ {
+ loading: true
+ }
+ );
+ }
+ const closeLoading = () => {
+ if (options?.sureBtnLoading) {
+ sureBtnMap.value[index].loading = false;
+ }
+ };
+ const done = () => {
+ closeLoading();
+ closeDrawer(options, index, { command: "sure" });
+ };
+ if (options?.beforeSure && isFunction(options?.beforeSure)) {
+ options.beforeSure(done, { options, index, closeLoading });
+ } else {
+ done();
+ }
+ }
+ }
+ ] as Array<ButtonProps>);
+ };
+});
+
+function eventsCallBack(
+ event: EventType,
+ options: DrawerOptions,
+ index: number
+) {
+ if (options?.[event] && isFunction(options?.[event])) {
+ return options?.[event]({ options, index });
+ }
+}
+
+/**
+ *
+ * @param {DrawerOptions} options - 包含抽屉相关配置的对象
+ * @param {number} index - 抽屉的索引
+ * @param {Object} args - 传递给关闭抽屉操作的参数对象，默认为 { command: 'close' }
+ * @returns {void} 这个函数不返回任何值
+ */
+function handleClose(
+ options: DrawerOptions,
+ index: number,
+ args = { command: "close" }
+) {
+ closeDrawer(options, index, args);
+ eventsCallBack("close", options, index);
+}
+</script>
+
+<template>
+ <el-drawer
+ v-for="(options, index) in drawerStore"
+ :key="index"
+ v-bind="options"
+ v-model="options.visible"
+ class="pure-drawer"
+ :append-to-body="!!options?.appendToBody"
+ :append-to="options?.appendTo ? options.appendTo : 'body'"
+ :destroy-on-close="!!options?.destroyOnClose"
+ :lock-scroll="!!options?.lockScroll"
+ @closed="handleClose(options, index)"
+ @opened="eventsCallBack('open', options, index)"
+ @open-auto-focus="eventsCallBack('openAutoFocus', options, index)"
+ @close-auto-focus="eventsCallBack('closeAutoFocus', options, index)"
+ >
+ <!-- header -->
+ <template
+ v-if="options?.headerRenderer"
+ #header="{ close, titleId, titleClass }"
+ >
+ <component
+ :is="options?.headerRenderer({ close, titleId, titleClass })"
+ />
+ </template>
+ <!-- body -->
+ <component
+ v-bind="options?.props"
+ :is="options.contentRenderer({ options, index })"
+ @close="args => handleClose(options, index, args)"
+ />
+ <!-- footer -->
+ <template v-if="!options?.hideFooter" #footer>
+ <template v-if="options?.footerRenderer">
+ <component :is="options?.footerRenderer({ options, index })" />
+ </template>
+ <span v-else>
+ <template v-for="(btn, key) in footerButtons(options)" :key="key">
+ <el-popconfirm
+ v-if="btn.popConfirm"
+ v-bind="btn.popConfirm"
+ @confirm="
+ btn.btnClick({
+ drawer: { options, index },
+ button: { btn, index: key }
+ })
+ "
+ >
+ <template #reference>
+ <el-button v-bind="btn">{{ btn?.label }}</el-button>
+ </template>
+ </el-popconfirm>
+ <el-button
+ v-else
+ v-bind="btn"
+ :loading="key === 1 && sureBtnMap[index]?.loading"
+ @click="
+ btn.btnClick({
+ drawer: { options, index },
+ button: { btn, index: key }
+ })
+ "
+ >
+ {{ btn?.label }}
+ </el-button>
+ </template>
+ </span>
+ </template>
+ </el-drawer>
+</template>