feat: Add focus and blur methods to buttons (#6490), close #6483

* feat(button): add methods for focus and blur

closed #6483

* docs(button): add focus methods doc

Author: mipawn

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() {

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<HTMLElement>(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?.());

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`.

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 个汉字之间的空格