Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修复BasicButton在外部改变样式热更新无效和class内容重复问题 #1016

Merged
merged 9 commits into from
Aug 1, 2021
9 changes: 5 additions & 4 deletions src/components/Button/src/BasicButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,32 @@
</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 [
{
[`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 };
},
Expand Down
5 changes: 3 additions & 2 deletions src/hooks/core/useAttrs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { Ref } from 'vue';
interface Params {
excludeListeners?: boolean;
excludeKeys?: string[];
excludeDefaultKeys?: boolean;
}

const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
Expand All @@ -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);
Expand Down