diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js index d82451160a..b465c68d34 100644 --- a/components/button/__tests__/index.test.js +++ b/components/button/__tests__/index.test.js @@ -5,10 +5,12 @@ import { nextTick } from 'vue'; import { asyncExpect, sleep } from '../../../tests/utils'; import mountTest from '../../../tests/shared/mountTest'; import { resetWarned } from '../../_util/warning'; +import focusTest from '../../../tests/shared/focusTest'; describe('Button', () => { mountTest(Button); mountTest(Button.Group); + focusTest(Button); it('renders correctly', () => { const wrapper = mount({ render() { diff --git a/components/button/button.tsx b/components/button/button.tsx index 8ae5b4716d..c9944c389a 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -36,7 +36,7 @@ export default defineComponent({ props: initDefaultProps(buttonProps(), { type: 'default' }), slots: ['icon'], // emits: ['click', 'mousedown'], - setup(props, { slots, attrs, emit }) { + setup(props, { slots, attrs, emit, expose }) { const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props); const buttonNodeRef = ref(null); @@ -146,6 +146,17 @@ export default defineComponent({ delayTimeoutRef.value && clearTimeout(delayTimeoutRef.value); }); + const focus = () => { + buttonNodeRef.value?.focus(); + }; + const blur = () => { + buttonNodeRef.value?.blur(); + }; + expose({ + focus, + blur, + }); + return () => { const { icon = slots.icon?.() } = props; const children = flattenChildren(slots.default?.()); diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 0de3dc711c..41e2bf8182 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -55,6 +55,15 @@ It accepts all props which native buttons support. ## FAQ +### Methods + +#### Checkbox + +| Name | Description | Version | +| ------- | ------------ | ------- | +| blur() | remove focus | | +| focus() | get focus | | + ### How to remove space between 2 chinese characters Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`. diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 91425ae5d4..5bf3dcbc65 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -56,6 +56,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg 支持原生 button 的其他所有属性。 +### 方法 + +#### Button + +| 名称 | 描述 | 版本 | +| ------- | -------- | ---- | +| blur() | 移除焦点 | | +| focus() | 获取焦点 | | + ## FAQ ### 如何移除 2 个汉字之间的空格