From 57e6e4f00435637c545c58de3cd84c102003032a Mon Sep 17 00:00:00 2001
From: bowen <54492610+jiaowoxiaobala@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:55:01 +0800
Subject: [PATCH] fix(BasicDrawer): remove toRaw props (#3399)

---
 src/components/Drawer/src/BasicDrawer.vue | 28 +++++++++++------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue
index e2594c7cf..05bd2fba1 100644
--- a/src/components/Drawer/src/BasicDrawer.vue
+++ b/src/components/Drawer/src/BasicDrawer.vue
@@ -2,7 +2,7 @@
   <Drawer v-bind="getBindValues" :class="prefixCls" @close="onClose">
     <template #title v-if="!$slots.title">
       <DrawerHeader
-        :title="mergeProps.title"
+        :title="getMergeProps.title"
         :isDetail="isDetail"
         :showDetailBack="showDetailBack"
         @close="onClose"
@@ -32,8 +32,8 @@
 </template>
 <script lang="ts" setup>
   import type { DrawerInstance, DrawerProps } from './typing';
-  import type { CSSProperties } from 'vue';
-  import { ref, computed, watch, unref, nextTick, toRaw, getCurrentInstance } from 'vue';
+  import { ref, computed, watch, unref, nextTick, getCurrentInstance } from 'vue';
+  import type { CSSProperties, Ref } from 'vue';
   import { Drawer } from 'ant-design-vue';
   import { useI18n } from '@/hooks/web/useI18n';
   import { isFunction, isNumber } from '@/utils/is';
@@ -53,13 +53,13 @@
 
   const openRef = ref(false);
   const attrs = useAttrs();
-  const propsRef = ref<Partial<DrawerProps | null>>(null);
+  const propsRef = ref({}) as Ref<Partial<DrawerProps>>;
 
   const { t } = useI18n();
   const { prefixVar, prefixCls } = useDesign('basic-drawer');
 
   const drawerInstance: DrawerInstance = {
-    setDrawerProps: setDrawerProps as any,
+    setDrawerProps,
     emitOpen: undefined,
   };
 
@@ -67,12 +67,12 @@
 
   instance && emit('register', drawerInstance, instance.uid);
 
-  const getMergeProps = computed((): DrawerProps => {
-    return deepMerge(toRaw(props), unref(propsRef)) as any;
+  const getMergeProps = computed(() => {
+    return deepMerge(props, unref(propsRef));
   });
 
-  const getProps = computed((): DrawerProps => {
-    const opt = {
+  const getProps = computed(() => {
+    const opt: Partial<DrawerProps> = {
       placement: 'right',
       ...unref(attrs),
       ...unref(getMergeProps),
@@ -91,10 +91,10 @@
         opt.getContainer = `.${prefixVar}-layout-content`;
       }
     }
-    return opt as DrawerProps;
+    return opt;
   });
 
-  const getBindValues = computed((): DrawerProps => {
+  const getBindValues = computed(() => {
     return {
       ...attrs,
       ...unref(getProps),
@@ -152,9 +152,9 @@
     openRef.value = false;
   }
 
-  function setDrawerProps(props: Partial<DrawerProps>): void {
+  function setDrawerProps(props: Partial<DrawerProps>) {
     // Keep the last setDrawerProps
-    propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
+    propsRef.value = deepMerge(unref(propsRef), props);
 
     if (Reflect.has(props, 'open')) {
       openRef.value = !!props.open;
@@ -164,8 +164,6 @@
   function handleOk() {
     emit('ok');
   }
-
-  const mergeProps = getMergeProps as any;
 </script>
 <style lang="less">
   @header-height: 60px;