2025-12-06 发版,具体发版内容见发版记录
This commit is contained in:
90
openhis-ui-vue3/src/directive/common/arrowNavigate.js
Normal file
90
openhis-ui-vue3/src/directive/common/arrowNavigate.js
Normal file
@@ -0,0 +1,90 @@
|
||||
const KEY_DELTA_MAP = {
|
||||
ArrowLeft: -1,
|
||||
ArrowUp: -1,
|
||||
ArrowRight: 1,
|
||||
ArrowDown: 1,
|
||||
}
|
||||
|
||||
const FOCUSABLE_SELECTORS = [
|
||||
'input:not([type="hidden"]):not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
'select:not([disabled])',
|
||||
'.el-input__inner',
|
||||
'.el-input-number',
|
||||
'.el-select',
|
||||
'.el-tree-select',
|
||||
'[tabindex]:not([tabindex="-1"])',
|
||||
]
|
||||
|
||||
function focusControl(container) {
|
||||
if (!container) return
|
||||
|
||||
const focus = (el) => {
|
||||
if (!el) return
|
||||
el.focus?.()
|
||||
if (el.select && !el.readOnly) {
|
||||
el.select()
|
||||
}
|
||||
}
|
||||
|
||||
if (container.matches?.('input, textarea, select')) {
|
||||
focus(container)
|
||||
return
|
||||
}
|
||||
|
||||
const directTarget = container.querySelector(FOCUSABLE_SELECTORS.join(', '))
|
||||
if (directTarget) {
|
||||
focusControl(directTarget)
|
||||
return
|
||||
}
|
||||
|
||||
focus(container)
|
||||
}
|
||||
|
||||
function getFormItems(root) {
|
||||
const propItems = Array.from(root.querySelectorAll('[data-prop]'))
|
||||
if (propItems.length) {
|
||||
return propItems
|
||||
}
|
||||
return Array.from(root.querySelectorAll('.el-form-item'))
|
||||
}
|
||||
|
||||
function createHandler(root) {
|
||||
return function handleKeyDown(event) {
|
||||
const delta = KEY_DELTA_MAP[event.key]
|
||||
if (!delta) return
|
||||
|
||||
const currentItem = event.target.closest('[data-prop], .el-form-item')
|
||||
if (!currentItem || !root.contains(currentItem)) return
|
||||
|
||||
const items = getFormItems(root)
|
||||
if (!items.length) return
|
||||
|
||||
const currentIndex = items.indexOf(currentItem)
|
||||
if (currentIndex === -1) return
|
||||
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
const nextIndex = (currentIndex + delta + items.length) % items.length
|
||||
const targetItem = items[nextIndex]
|
||||
if (targetItem) {
|
||||
focusControl(targetItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
mounted(el) {
|
||||
const handler = createHandler(el)
|
||||
el.__arrowNavigateHandler = handler
|
||||
el.addEventListener('keydown', handler, true)
|
||||
},
|
||||
beforeUnmount(el) {
|
||||
if (el.__arrowNavigateHandler) {
|
||||
el.removeEventListener('keydown', el.__arrowNavigateHandler, true)
|
||||
delete el.__arrowNavigateHandler
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user