mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-06 12:17:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(cascader): keyboard scroll cascader menu

Browse Source
This commit is contained in:
07akioni 2020-12-16 00:20:50 +08:00
parent 6d0b8f2b61
commit 094a481f0b
2 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/cascader/src/Cascader.vue
View File

@ -92,7 +92,9 @@ import { warn, call } from '../../_utils'
import CascaderMenu from './CascaderMenu.vue' import CascaderMenu from './CascaderMenu.vue'
import CascaderSelectMenu from './CascaderSelectMenu.vue' import CascaderSelectMenu from './CascaderSelectMenu.vue'
import styles from './styles' import styles from './styles'
import { depx } from 'seemly'
// TODO refactor cascader menu keyboard scroll (use virtual list)
export default { export default {
name: 'Cascader', name: 'Cascader',
components: { components: {
@ -103,7 +105,15 @@ export default {
VTarget, VTarget,
VFollower VFollower
}, },
mixins: [configurable, themeable, locale('Cascader'), withCssr(styles)], mixins: [
configurable,
themeable,
locale('Cascader'),
withCssr(styles, {
injectCssrProps: true,
themeKey: 'mergedTheme'
})
],
provide () { provide () {
return { return {
NCascader: this NCascader: this
@ -275,9 +285,15 @@ export default {
switch (direction) { switch (direction) {
case 'prev': case 'prev':
if (keyboardKey !== null) { if (keyboardKey !== null) {
const node = treeMate.getPrev(keyboardKey) const node = treeMate.getPrev(keyboardKey, { loop: true })
if (node !== null) { if (node !== null) {
updateKeyboardKey(node.key) updateKeyboardKey(node.key)
this.cascaderMenuRef.submenuRefs[
node.level
].scrollbarRef.scrollTo({
index: node.index,
elSize: depx(this.cssrProps.$local.optionHeight)
})
} }
} }
break break
@ -286,11 +302,23 @@ export default {
const node = treeMate.getFirstAvailableNode() const node = treeMate.getFirstAvailableNode()
if (node !== null) { if (node !== null) {
updateKeyboardKey(node.key) updateKeyboardKey(node.key)
this.cascaderMenuRef.submenuRefs[
node.level
].scrollbarRef.scrollTo({
index: node.index,
elSize: depx(this.cssrProps.$local.optionHeight)
})
} }
} else { } else {
const node = treeMate.getNext(keyboardKey) const node = treeMate.getNext(keyboardKey, { loop: true })
if (node !== null) { if (node !== null) {
updateKeyboardKey(node.key) updateKeyboardKey(node.key)
this.cascaderMenuRef.submenuRefs[
node.level
].scrollbarRef.scrollTo({
index: node.index,
elSize: depx(this.cssrProps.$local.optionHeight)
})
} }
} }
break break

2
src/scrollbar/src/ScrollBar.vue
View File

@ -335,7 +335,7 @@ export default {
behavior behavior
) )
} else if (index !== undefined && elSize !== undefined) { } else if (index !== undefined && elSize !== undefined) {
this.scrollToPosition(0, index * elSize, behavior, debounce, behavior) this.scrollToPosition(0, index * elSize, elSize, debounce, behavior)
} else if (position === 'bottom') { } else if (position === 'bottom') {
this.scrollToPosition(0, Number.MAX_SAFE_INTEGER, 0, false, behavior) this.scrollToPosition(0, Number.MAX_SAFE_INTEGER, 0, false, behavior)
} else if (position === 'top') { } else if (position === 'top') {