From 9bde166c32a7c56121f9d45a7ed2e02788996faa Mon Sep 17 00:00:00 2001 From: chenxi24 Date: Mon, 6 Dec 2021 09:05:21 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat=20:=E7=BB=99=E5=8F=AF=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E4=B8=8B=E6=8B=89=E6=A1=86=E5=A2=9E=E5=8A=A0=E9=94=AE?= =?UTF-8?q?=E7=9B=98=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/dropdown.tsx | 4 +- .../editable-select/src/editable-select.tsx | 70 ++++++++++++++++++- .../devui/editable-select/src/index.js | 0 .../docs/components/editable-select/index.md | 16 ++--- yarn.lock | 53 ++------------ 5 files changed, 80 insertions(+), 63 deletions(-) create mode 100644 packages/devui-vue/devui/editable-select/src/index.js diff --git a/packages/devui-vue/devui/editable-select/src/components/dropdown.tsx b/packages/devui-vue/devui/editable-select/src/components/dropdown.tsx index 711f94ee..7f1f029b 100644 --- a/packages/devui-vue/devui/editable-select/src/components/dropdown.tsx +++ b/packages/devui-vue/devui/editable-select/src/components/dropdown.tsx @@ -14,6 +14,7 @@ export default defineComponent({ renderDefaultSlots, renderEmptySlots, selectedIndex, + hoverIndex, loadMore } = select const { maxHeight } = selectProps @@ -22,7 +23,8 @@ export default defineComponent({ const { disabledKey } = selectProps return className('devui-dropdown-item', { disabled: disabledKey ? !!item[disabledKey] : false, - selected: selectedIndex.value === index + selected: selectedIndex.value === index, + 'devui-dropdown-bg': hoverIndex.value === index }) } return ( diff --git a/packages/devui-vue/devui/editable-select/src/editable-select.tsx b/packages/devui-vue/devui/editable-select/src/editable-select.tsx index 851816c2..ab9a9093 100644 --- a/packages/devui-vue/devui/editable-select/src/editable-select.tsx +++ b/packages/devui-vue/devui/editable-select/src/editable-select.tsx @@ -6,7 +6,8 @@ import { reactive, toRefs, provide, - renderSlot + renderSlot, + nextTick } from 'vue' import { OptionItem, @@ -66,6 +67,7 @@ export default defineComponent({ const visible = ref(false) const inputValue = ref('') const selectedIndex = ref(0) + const hoverIndex = ref(0) const query = ref(props.modelValue) const position = reactive({ originX: 'left', @@ -164,6 +166,7 @@ export default defineComponent({ selectedIndex.value = findIndex(item) inputValue.value = '' ctx.emit('update:modelValue', item.name) + visible.value = false } } @@ -174,6 +177,61 @@ export default defineComponent({ props.loadMore() } } + const updateHoverIndex = (index: number) => { + hoverIndex.value = index + } + const scrollToActive = (index: number) => { + const dropdownVal = dropdownRef.value + const li = dropdownVal.children[index] + + nextTick(() => { + if (li.scrollIntoViewIfNeeded) { + li.scrollIntoViewIfNeeded(false) + } else { + const containerInfo = dropdownVal.getBoundingClientRect() + const elementInfo = li.getBoundingClientRect() + if (elementInfo.bottom > containerInfo.bottom || elementInfo.top < containerInfo.top) { + li.scrollIntoView(false) + } + } + }) + } + const onKeyboardSelect = (e) => { + const option = filteredOptions.value[hoverIndex.value] + selectOptionClick(e, option) + nextTick(() => { + hoverIndex.value = selectedIndex.value + }) + } + const handleKeydown = (e) => { + const keyCode = e.key || e.code + let index = 0 + if (!visible.value) { + toggleMenu() + } + + if (keyCode === 'Backspace') { + return + } + + if (keyCode === 'ArrowUp') { + index = hoverIndex.value - 1 + if (index < 0) { + index = filteredOptions.value.length - 1 + } + } else if (keyCode === 'ArrowDown') { + index = hoverIndex.value + 1 + if (index > filteredOptions.value.length - 1) { + index = 0 + } + } + if (keyCode === 'Enter') { + onKeyboardSelect(e) + } + updateHoverIndex(index) + scrollToActive(index) + } + provide('InjectionKey', { dropdownRef, props: reactive({ @@ -182,6 +240,7 @@ export default defineComponent({ visible, emptyText, selectedIndex, + hoverIndex, loadMore, selectOptionClick, renderDefaultSlots, @@ -201,7 +260,14 @@ export default defineComponent({ return ( <>
- +