canrd-outside / order-erp-front · Commits

Commit be2d11d5d344a508e94abe3534726c80e1f1f271

Authored by Li Li
Committed by GitHub
1 parent 88451565

fix: Fix the invalid hot update of BasicButton when changing style outside (#1016) 

* 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>
Inline Side-by-side
Showing 2 changed files with 8 additions and 6 deletions
src/components/Button/src/BasicButton.vue
  View file @be2d11d
@@ -8,18 +8,20 @@ @@ -8,18 +8,20 @@
8 </Button> 8 </Button>
9 </template> 9 </template>
10 <script lang="ts"> 10 <script lang="ts">
11 - import { defineComponent, computed } from 'vue'; 11 + import { defineComponent, computed, unref } from 'vue';
12 import { Button } from 'ant-design-vue'; 12 import { Button } from 'ant-design-vue';
13 import Icon from '/@/components/Icon/src/Icon.vue'; 13 import Icon from '/@/components/Icon/src/Icon.vue';
14 import { buttonProps } from './props'; 14 import { buttonProps } from './props';
  15 + import { useAttrs } from '/@/hooks/core/useAttrs';
15 16
16 export default defineComponent({ 17 export default defineComponent({
17 name: 'AButton', 18 name: 'AButton',
18 components: { Button, Icon }, 19 components: { Button, Icon },
19 inheritAttrs: false, 20 inheritAttrs: false,
20 props: buttonProps, 21 props: buttonProps,
21 - setup(props, { attrs }) { 22 + setup(props) {
22 // get component class 23 // get component class
  24 + const attrs = useAttrs({ excludeDefaultKeys: false });
23 const getButtonClass = computed(() => { 25 const getButtonClass = computed(() => {
24 const { color, disabled } = props; 26 const { color, disabled } = props;
25 return [ 27 return [
@@ -27,12 +29,11 @@ @@ -27,12 +29,11 @@
27 [`ant-btn-${color}`]: !!color, 29 [`ant-btn-${color}`]: !!color,
28 [`is-disabled`]: disabled, 30 [`is-disabled`]: disabled,
29 }, 31 },
30 - attrs.class,  
31 ]; 32 ];
32 }); 33 });
33 34
34 // get inherit binding value 35 // get inherit binding value
35 - const getBindValue = computed(() => ({ ...attrs, ...props })); 36 + const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
36 37
37 return { getBindValue, getButtonClass }; 38 return { getBindValue, getButtonClass };
38 }, 39 },
src/hooks/core/useAttrs.ts
  View file @be2d11d
@@ -3,6 +3,7 @@ import type { Ref } from &#39;vue&#39;; @@ -3,6 +3,7 @@ import type { Ref } from &#39;vue&#39;;
3 interface Params { 3 interface Params {
4 excludeListeners?: boolean; 4 excludeListeners?: boolean;
5 excludeKeys?: string[]; 5 excludeKeys?: string[];
  6 + excludeDefaultKeys?: boolean;
6 } 7 }
7 8
8 const DEFAULT_EXCLUDE_KEYS = ['class', 'style']; 9 const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
@@ -16,9 +17,9 @@ export function useAttrs(params: Params = {}): Ref&lt;Recordable&gt; | {} { @@ -16,9 +17,9 @@ export function useAttrs(params: Params = {}): Ref&lt;Recordable&gt; | {} {
16 const instance = getCurrentInstance(); 17 const instance = getCurrentInstance();
17 if (!instance) return {}; 18 if (!instance) return {};
18 19
19 - const { excludeListeners = false, excludeKeys = [] } = params; 20 + const { excludeListeners = false, excludeKeys = [], excludeDefaultKeys = true } = params;
20 const attrs = shallowRef({}); 21 const attrs = shallowRef({});
21 - const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS); 22 + const allExcludeKeys = excludeKeys.concat(excludeDefaultKeys ? DEFAULT_EXCLUDE_KEYS : []);
22 23
23 // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance 24 // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
24 instance.attrs = reactive(instance.attrs); 25 instance.attrs = reactive(instance.attrs);