From 08507923d7368dd17fb85ef03412fdde7d84658a Mon Sep 17 00:00:00 2001 From: Mipawn Date: Sat, 22 Apr 2023 13:23:02 +0800 Subject: [PATCH 1/2] feat(button): add methods for focus and blur closed #6483 --- components/button/__tests__/index.test.js | 2 ++ components/button/button.tsx | 13 ++++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) 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?.()); From be8595a89f90939aef976eb0d1b3bb9bfc132818 Mon Sep 17 00:00:00 2001 From: Mipawn Date: Sat, 22 Apr 2023 13:25:38 +0800 Subject: [PATCH 2/2] docs(button): add focus methods doc --- components/button/index.en-US.md | 9 +++++++++ components/button/index.zh-CN.md | 9 +++++++++ 2 files changed, 18 insertions(+) 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 个汉字之间的空格