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

refactor(cascader): filterable

Browse Source
This commit is contained in:
07akioni 2020-10-16 19:14:46 +08:00
parent eb028c6bf0
commit ea92ffc499
3 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -377,9 +377,11 @@ export default {
this.doCheck(keyboardKey) this.doCheck(keyboardKey)
} }
} }
} } else {
if (selectMenuRef) { if (selectMenuRef) {
selectMenuRef.enter() const hasCorrespondingOption = selectMenuRef.enter()
if (hasCorrespondingOption) this.pattern = ''
}
} }
} }
}, },

6
src/cascader/src/CascaderMenu.vue
View File

@ -41,7 +41,7 @@
</template> </template>
<script> <script>
import { ref } from 'vue' import { ref } from 'vue'
import NBaseMenuMask from '../../_base/menu-mask' // import NBaseMenuMask from '../../_base/menu-mask'
import NCascaderSubmenu from './CascaderSubmenu.vue' import NCascaderSubmenu from './CascaderSubmenu.vue'
import { placeable } from '../../_mixins' import { placeable } from '../../_mixins'
import { getPickerElement } from './utils' import { getPickerElement } from './utils'
@ -53,8 +53,8 @@ import {
export default { export default {
name: 'NCascaderMenu', name: 'NCascaderMenu',
components: { components: {
NCascaderSubmenu, NCascaderSubmenu
NBaseMenuMask // NBaseMenuMask
}, },
directives: { directives: {
zindexable, zindexable,

62
src/cascader/src/CascaderSelectMenu.vue
View File

@ -14,13 +14,14 @@
ref="menuRef" ref="menuRef"
v-clickoutside="handleClickOutside" v-clickoutside="handleClickOutside"
class="n-cascader-menu" class="n-cascader-menu"
auto-pending-first-option
:theme="theme" :theme="theme"
:pattern="pattern" :pattern="pattern"
:options="filteredSelectOptions" :options="filteredSelectOptions"
:multiple="multiple" :multiple="multiple"
:size="size" :size="size"
:value="value" :value="value"
@menu-toggle-option="handleSelectMenuToggleOption" @menu-toggle-option="handleToggleOption"
/> />
</transition> </transition>
</div> </div>
@ -119,9 +120,7 @@ export default {
return this.show return this.show
}, },
selectOptions () { selectOptions () {
const ret = createSelectOptions(this.tmNodes, this.leafOnly) return createSelectOptions(this.tmNodes, this.leafOnly)
console.log(this.tmNodes, this.leafOnly, 'ret', ret)
return ret
}, },
filteredSelectOptions () { filteredSelectOptions () {
return this.selectOptions.filter(option => { return this.selectOptions.filter(option => {
@ -157,32 +156,33 @@ export default {
__placeableBody () { __placeableBody () {
return this.menuRef return this.menuRef
}, },
handleSelectMenuToggleOption (option) { handleToggleOption (option) {
this.handleSelectOptionCheck(option) this.doCheck(option)
}, },
handleSelectOptionCheck (option) { doCheck (option) {
// if (option.disabled) return if (this.multiple) {
// const { const {
// 'onUpdate:value': onUpdateValue NCascader: {
// } = this value,
// if (this.multiple) { doCheck,
// if (Array.isArray(this.value)) { doUncheck
// const index = this.value.findIndex(v => v === option.value) }
// if (~index) { } = this
// const newValue = this.value if (value === null || !value.includes(option.value)) {
// newValue.splice(index, 1) doCheck(option.value)
// onUpdateValue(newValue) } else {
// } else { doUncheck(option.value)
// const newValue = this.value }
// newValue.push(option.value) } else {
// onUpdateValue(newValue) const {
// } NCascader: {
// } else { doCheck,
// onUpdateValue([option.value]) closeMenu
// } }
// } else { } = this
// onUpdateValue(option.value) doCheck(option.value)
// } closeMenu()
}
}, },
prev () { prev () {
const { menuRef } = this const { menuRef } = this
@ -196,8 +196,10 @@ export default {
const { menuRef } = this const { menuRef } = this
if (menuRef) { if (menuRef) {
const pendingOptionData = menuRef.getPendingOptionData() const pendingOptionData = menuRef.getPendingOptionData()
this.handleSelectOptionCheck(pendingOptionData) this.doCheck(pendingOptionData)
return true
} }
return false
}, },
handleClickOutside (e) { handleClickOutside (e) {
this.NCascader.handleSelectMenuClickOutside(e) this.NCascader.handleSelectMenuClickOutside(e)