mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-27 02:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [message-box] add autofocus attribute (#8445)

Browse Source 
* feat(components): [message-box] add autofocus attribute

* fix: autofocus to be true by default

* docs: message-box autofocus default value

* chore: remove useless comment

* fix: focusStartRef value el
This commit is contained in:
云游君 2022-06-26 04:32:05 +08:00 committed by GitHub
parent db766ac310
commit 5d88f628bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/vitepress/styles/css-vars.scss
View File

@ -55,7 +55,7 @@
--content-min-width: 16rem;
--content-max-width: 48rem;
--nav-z-index: 20;
--nav-z-index: 10;
--sub-nav-z-index: 10;
--sidebar-z-index: 40;
--overlay-z-index: 30;

1
docs/en-US/component/message-box.md
View File

@ -154,6 +154,7 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB
| Attribute | Description | Type | Accepted Values | Default |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
| autofocus | auto focus when open MessageBox | boolean | — | true |
| title | title of the MessageBox | string | — | — |
| message | content of the MessageBox | string | — | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |

2
docs/examples/message-box/alert.vue
View File

@ -8,6 +8,8 @@ import type { Action } from 'element-plus'
const open = () => {
ElMessageBox.alert('This is a message', 'Title', {
// if you want to disable its autofocus
// autofocus: false,
confirmButtonText: 'OK',
callback: (action: Action) => {
ElMessage({

13
packages/components/message-box/__tests__/message-box.test.ts
View File

@ -144,6 +144,19 @@ describe('MessageBox', () => {
expect(msgbox).toBe(null)
})
test('autofocus', async () => {
MessageBox.alert('这是一段内容', {
autofocus: false,
title: '标题名称',
})
await rAF()
const btnElm = document.querySelector(
'.el-message-box__btns .el-button--primary'
)
const haveFocus = btnElm.isSameNode(document.activeElement)
expect(haveFocus).toBe(false)
})
test('prompt', async () => {
MessageBox.prompt('这是一段内容', {
title: '标题名称',

14
packages/components/message-box/src/index.vue
View File

@ -259,6 +259,8 @@ export default defineComponent({
const { nextZIndex } = useZIndex()
// s represents state
const state = reactive<MessageBoxState>({
// autofocus element when open message-box
autofocus: true,
beforeClose: null,
callback: null,
cancelButtonText: '',
@ -337,7 +339,11 @@ export default defineComponent({
(val) => {
if (val) {
if (props.boxType !== 'prompt') {
focusStartRef.value = confirmRef.value?.$el ?? rootRef.value
if (state.autofocus) {
focusStartRef.value = confirmRef.value?.$el ?? rootRef.value
} else {
focusStartRef.value = rootRef.value
}
}
state.zIndex = nextZIndex()
}
@ -345,7 +351,11 @@ export default defineComponent({
if (val) {
nextTick().then(() => {
if (inputRef.value && inputRef.value.$el) {
focusStartRef.value = getInputElement() ?? rootRef.value
if (state.autofocus) {
focusStartRef.value = getInputElement() ?? rootRef.value
} else {
focusStartRef.value = rootRef.value
}
}
})
} else {

6
packages/components/message-box/src/message-box.type.ts
View File

@ -16,6 +16,7 @@ export interface MessageBoxInputValidator {
}
export declare interface MessageBoxState {
autofocus: boolean
title: string
message: string
type: MessageType
@ -62,6 +63,11 @@ export type Callback =
/** Options used in MessageBox */
export interface ElMessageBoxOptions {
/**
* auto focus when open message-box
*/
autofocus?: boolean
/** Callback before MessageBox closes, and it will prevent MessageBox from closing */
beforeClose?: (
action: Action,