mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(menu): prop default-expand-all

Browse Source
This commit is contained in:
07akioni 2020-11-13 21:09:49 +08:00
parent adc16d3a87
commit 5772b40a5e
3 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/documentation/components/menu/enUS/index.demo-entry.md
View File

@ -16,6 +16,7 @@ collapse
|collapsed-icon-size|`number`|`undefined`|The icon size when menu is collapsed. If not set, menu will use `icon-size` in place of it.|
|collapsed-width|`number`|`undefined`|The menu width after collapsed.|
|collapsed|`boolean`|`false`|The collapsed status of menu, only works when menu is vertical.|
|default-expand-all|`boolean`|`false`||
|default-expanded-keys|`Array<string>`|`[]`|The default expanded submenu keys of menu in uncontrolled manner.|
|expanded-keys|`Array<string>`|`undefined`|The expanded submenu keys. If set, menu will work in controlled manner and `default-expanded-names` won't work.|
|icon-size|`number`|`20`|The icon size when menu is not collapsed.|

1
demo/documentation/components/menu/zhCN/index.demo-entry.md
View File

@ -16,6 +16,7 @@ collapse
|collapsed-icon-size|`number`|`24`|菜单折叠时图标的大小，如果为设定则使用 `icon-size` 代替|
|collapsed-width|`number`|`undefined`|折叠后菜单的宽度|
|collapsed|`boolean`|`false`|菜单是否折叠，值在菜单为垂直时有用|
|default-expand-all|`boolean`|`false`||
|default-expanded-keys|`Array<string>`|`[]`|在非受控状态下默认展开的子菜单标识符数组|
|expanded-keys|`Array<string>`|`undefined`|展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，`default-expanded-keys` 不会生效|
|icon-size|`number`|`20`|菜单未折叠时图标的大小|

24
src/menu/src/Menu.js
View File

@ -53,6 +53,10 @@ export default {
type: Number,
default: 32
},
defaultExpandedAll: {
type: Boolean,
default: false
},
defaultExpandedKeys: {
type: Array,
default: () => []
@ -115,17 +119,25 @@ export default {
}
},
setup (props) {
const uncontrolledExpandedKeysRef = ref(props.defaultExpandedNames || props.defaultExpandedKeys)
const controlledExpandedKeysRef = useCompitable(props, 'expandedNames', 'expandedKeys')
const mergedExpandedKeysRef = useMergedState(
controlledExpandedKeysRef,
uncontrolledExpandedKeysRef
)
const treeMateRef = computed(() => createTreeMate(props.items, {
getKey (node) {
return node.key ?? node.name
}
}))
const uncontrolledExpandedKeysRef = ref(
props.defaultExpandedAll
? treeMateRef.value.getNonLeafKeys()
: (
props.defaultExpandedNames ||
props.defaultExpandedKeys
)
)
const controlledExpandedKeysRef = useCompitable(props, 'expandedNames', 'expandedKeys')
const mergedExpandedKeysRef = useMergedState(
controlledExpandedKeysRef,
uncontrolledExpandedKeysRef
)
const tmNodesRef = computed(() => treeMateRef.value.treeNodes)
const valueRef = toRef(props, 'value')
const activePathRef = computed(() => {