From be2d11d5d344a508e94abe3534726c80e1f1f271 Mon Sep 17 00:00:00 2001
From: Li Li <lli@streamnative.io>
Date: Sun, 1 Aug 2021 08:50:21 +0800
Subject: [PATCH] fix: Fix the invalid hot update of BasicButton when changing
 style outside (#1016)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: ignore bak dir

Signed-off-by: LiLi <urfreespace@gmail.com>

* fix: 修复BasicButton在外部改变样式热更新无效问题

Signed-off-by: LiLi <urfreespace@gmail.com>

* chore: remove extra ignore

Signed-off-by: LiLi <urfreespace@gmail.com>

* chore: ignore fix

Signed-off-by: LiLi <urfreespace@gmail.com>
---
 src/components/Button/src/BasicButton.vue | 9 +++++----
 src/hooks/core/useAttrs.ts                | 5 +++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue
index ea1932212e4..3b6fb52fc83 100644
--- a/src/components/Button/src/BasicButton.vue
+++ b/src/components/Button/src/BasicButton.vue
@@ -8,18 +8,20 @@
   </Button>
 </template>
 <script lang="ts">
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
   import { Button } from 'ant-design-vue';
   import Icon from '/@/components/Icon/src/Icon.vue';
   import { buttonProps } from './props';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
 
   export default defineComponent({
     name: 'AButton',
     components: { Button, Icon },
     inheritAttrs: false,
     props: buttonProps,
-    setup(props, { attrs }) {
+    setup(props) {
       // get component class
+      const attrs = useAttrs({ excludeDefaultKeys: false });
       const getButtonClass = computed(() => {
         const { color, disabled } = props;
         return [
@@ -27,12 +29,11 @@
             [`ant-btn-${color}`]: !!color,
             [`is-disabled`]: disabled,
           },
-          attrs.class,
         ];
       });
 
       // get inherit binding value
-      const getBindValue = computed(() => ({ ...attrs, ...props }));
+      const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
 
       return { getBindValue, getButtonClass };
     },
diff --git a/src/hooks/core/useAttrs.ts b/src/hooks/core/useAttrs.ts
index 9290ae72a4d..a7c5bd74c60 100644
--- a/src/hooks/core/useAttrs.ts
+++ b/src/hooks/core/useAttrs.ts
@@ -3,6 +3,7 @@ import type { Ref } from 'vue';
 interface Params {
   excludeListeners?: boolean;
   excludeKeys?: string[];
+  excludeDefaultKeys?: boolean;
 }
 
 const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
@@ -16,9 +17,9 @@ export function useAttrs(params: Params = {}): Ref<Recordable> | {} {
   const instance = getCurrentInstance();
   if (!instance) return {};
 
-  const { excludeListeners = false, excludeKeys = [] } = params;
+  const { excludeListeners = false, excludeKeys = [], excludeDefaultKeys = true } = params;
   const attrs = shallowRef({});
-  const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS);
+  const allExcludeKeys = excludeKeys.concat(excludeDefaultKeys ? DEFAULT_EXCLUDE_KEYS : []);
 
   // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
   instance.attrs = reactive(instance.attrs);