github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-25 02:58:43 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Li Li 2021-08-01 08:50:21 +08:00 committed by GitHub
parent 88451565db
commit be2d11d5d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Button/src/BasicButton.vue
View File

@ -8,18 +8,20 @@
</Button> </Button>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, computed } from 'vue'; import { defineComponent, computed, unref } from 'vue';
import { Button } from 'ant-design-vue'; import { Button } from 'ant-design-vue';
import Icon from '/@/components/Icon/src/Icon.vue'; import Icon from '/@/components/Icon/src/Icon.vue';
import { buttonProps } from './props'; import { buttonProps } from './props';
import { useAttrs } from '/@/hooks/core/useAttrs';
export default defineComponent({ export default defineComponent({
name: 'AButton', name: 'AButton',
components: { Button, Icon }, components: { Button, Icon },
inheritAttrs: false, inheritAttrs: false,
props: buttonProps, props: buttonProps,
setup(props, { attrs }) { setup(props) {
// get component class // get component class
const attrs = useAttrs({ excludeDefaultKeys: false });
const getButtonClass = computed(() => { const getButtonClass = computed(() => {
const { color, disabled } = props; const { color, disabled } = props;
return [ return [
@ -27,12 +29,11 @@
[`ant-btn-${color}`]: !!color, [`ant-btn-${color}`]: !!color,
[`is-disabled`]: disabled, [`is-disabled`]: disabled,
}, },
attrs.class,
]; ];
}); });
// get inherit binding value // get inherit binding value
const getBindValue = computed(() => ({ ...attrs, ...props })); const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
return { getBindValue, getButtonClass }; return { getBindValue, getButtonClass };
}, },

5
src/hooks/core/useAttrs.ts
View File

@ -3,6 +3,7 @@ import type { Ref } from 'vue';
interface Params { interface Params {
excludeListeners?: boolean; excludeListeners?: boolean;
excludeKeys?: string[]; excludeKeys?: string[];
excludeDefaultKeys?: boolean;
} }
const DEFAULT_EXCLUDE_KEYS = ['class', 'style']; const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
@ -16,9 +17,9 @@ export function useAttrs(params: Params = {}): Ref<Recordable> | {} {
const instance = getCurrentInstance(); const instance = getCurrentInstance();
if (!instance) return {}; if (!instance) return {};
const { excludeListeners = false, excludeKeys = [] } = params; const { excludeListeners = false, excludeKeys = [], excludeDefaultKeys = true } = params;
const attrs = shallowRef({}); 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 // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
instance.attrs = reactive(instance.attrs); instance.attrs = reactive(instance.attrs);