diff --git a/docs/en-US/component/config-provider.md b/docs/en-US/component/config-provider.md index 6f94138887..420dd0f33c 100644 --- a/docs/en-US/component/config-provider.md +++ b/docs/en-US/component/config-provider.md @@ -114,6 +114,7 @@ In this section, you can learn how to use Config Provider to provide experimenta | type ^(2.9.11) | button type, when setting `color`, the latter prevails | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'text' (deprecated)` | — | | autoInsertSpace | automatically insert a space between two chinese characters(this will only take effect when the text length is 2 and all characters are in Chinese.) | ^[boolean] | false | | plain ^(2.9.11) | determine whether it's a plain button | ^[boolean] | false | +| text ^(2.11.0) | determine whether it's a text button | ^[boolean] | false | | round ^(2.9.11) | determine whether it's a round button | ^[boolean] | false | ### Link Attribute diff --git a/docs/examples/config-provider/button.vue b/docs/examples/config-provider/button.vue index a8e2d19c0f..f039c6790d 100644 --- a/docs/examples/config-provider/button.vue +++ b/docs/examples/config-provider/button.vue @@ -6,6 +6,7 @@ plain round + text diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts index 4d41934c83..82dbaba543 100644 --- a/packages/components/button/src/button.ts +++ b/packages/components/button/src/button.ts @@ -72,7 +72,10 @@ export const buttonProps = buildProps({ /** * @description determine whether it's a text button */ - text: Boolean, + text: { + type: Boolean, + default: undefined, + }, /** * @description determine whether it's a link button */ @@ -133,6 +136,7 @@ export type ButtonNativeType = ButtonProps['nativeType'] export interface ButtonConfigContext { type?: string plain?: boolean + text?: boolean round?: boolean autoInsertSpace?: boolean } diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue index df3462afa5..ed7493f80e 100644 --- a/packages/components/button/src/button.vue +++ b/packages/components/button/src/button.vue @@ -51,6 +51,7 @@ const { _props, _plain, _round, + _text, shouldAddSpace, handleClick, } = useButton(props, emit) @@ -63,7 +64,7 @@ const buttonKls = computed(() => [ ns.is('plain', _plain.value), ns.is('round', _round.value), ns.is('circle', props.circle), - ns.is('text', props.text), + ns.is('text', _text.value), ns.is('link', props.link), ns.is('has-bg', props.bg), ]) diff --git a/packages/components/button/src/use-button.ts b/packages/components/button/src/use-button.ts index 8c0104d9b1..b96bf53465 100644 --- a/packages/components/button/src/use-button.ts +++ b/packages/components/button/src/use-button.ts @@ -47,6 +47,7 @@ export const useButton = ( const _round = computed( () => props.round ?? globalConfig.value?.round ?? false ) + const _text = computed(() => props.text ?? globalConfig.value?.text ?? false) const _props = computed(() => { if (props.tag === 'button') { @@ -92,6 +93,7 @@ export const useButton = ( _props, _plain, _round, + _text, shouldAddSpace, handleClick, } diff --git a/packages/components/config-provider/__tests__/config-provider.test.tsx b/packages/components/config-provider/__tests__/config-provider.test.tsx index e7120030cb..756e780df9 100644 --- a/packages/components/config-provider/__tests__/config-provider.test.tsx +++ b/packages/components/config-provider/__tests__/config-provider.test.tsx @@ -139,6 +139,7 @@ describe('config-provider', () => { plain: true, round: true, autoInsertSpace: true, + text: true, }) const wrapper = mount(() => ( @@ -150,7 +151,7 @@ describe('config-provider', () => { expect( wrapper .find( - '.el-button.el-button--warning.is-plain.is-round .el-button__text--expand' + '.el-button.el-button--warning.is-plain.is-round.is-text .el-button__text--expand' ) .exists() ).toBe(true)