mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
Merge pull request #152 from TuSimple/freestyle
refactor(menu): not supporting slot anymore
This commit is contained in:
07akioni
GitHub Enterprise
commit
a31b3239bf
@ -1,45 +0,0 @@
|
||||
# Basic
|
||||
```html
|
||||
<div>
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
@expandedNamesChange="changeOpen"
|
||||
@select="changeSelect"
|
||||
>
|
||||
<n-menu-item title="num1" name="num1"></n-menu-item>
|
||||
<n-menu-item title="num2" name="num2"></n-menu-item>
|
||||
<n-menu-item title="num3" name="num3"></n-menu-item>
|
||||
<n-submenu title="subMenu" name="subMenu">
|
||||
<n-menu-item title="sub1" name="sub1"></n-menu-item>
|
||||
</n-submenu>
|
||||
<n-submenu title="subMenu2" name="subMenu2">
|
||||
<n-submenu title="subMenu22" name="subMenu22">
|
||||
<n-menu-item title="sub222" name="sub222"></n-menu-item>
|
||||
</n-submenu>
|
||||
</n-submenu>
|
||||
<n-submenu title="subMenu3" name="subMenu3">
|
||||
<n-menu-item title="sub1" name="sub8"></n-menu-item>
|
||||
<n-menu-item title="sub1" name="sub6"></n-menu-item>
|
||||
<n-menu-item title="sub1" name="sub7"></n-menu-item>
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
</div>
|
||||
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeOpen (names) {
|
||||
console.log('names', names)
|
||||
},
|
||||
changeSelect (val) {
|
||||
console.log('changeSelect', val)
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -16,66 +16,9 @@ Use collapsable vertical menu with layout sider. Use `collapsed` to control coll
|
||||
:collapsed="collapsed"
|
||||
:collapsed-width="64"
|
||||
:collapsed-icon-size="22"
|
||||
:items="menuItems"
|
||||
v-model="activeMenuItemName"
|
||||
>
|
||||
<n-menu-item title="Hear the Wind Sing" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Pinball, 1973" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Rat" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="A Wild Sheep Chase" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Dance Dance Dance" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="Characters">
|
||||
<n-menu-item title="Narrator" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="Sheep Man" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="Beverage" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Whisky" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="Food" name="food">
|
||||
<n-menu-item title="Sandwich" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="The past increases. The future recedes." name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
/>
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-content>
|
||||
@ -89,6 +32,80 @@ import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: 'Hear the Wind Sing',
|
||||
name: 'hear-the-wind-sing',
|
||||
icon: h => h('n-icon', [h(bookIcon)])
|
||||
},
|
||||
{
|
||||
title: 'Pinball, 1973',
|
||||
name: 'pinball-1973',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
title: 'Rat',
|
||||
name: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'A Wild Sheep Chase',
|
||||
name: 'a-wild-sheep-chase',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'Dance Dance Dance',
|
||||
name: 'dance-dance-dance',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
title: 'Characters',
|
||||
children: [
|
||||
{
|
||||
title: 'Narrator',
|
||||
name: 'narrator',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
},
|
||||
{
|
||||
title: 'Sheep Man',
|
||||
name: 'sheep-man',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Beverage',
|
||||
name: 'beverage',
|
||||
icon: h => h('n-icon', [h(wineIcon)]),
|
||||
children: [
|
||||
{
|
||||
title: 'Whisky',
|
||||
name: 'whisky'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Food',
|
||||
name: 'food',
|
||||
children: [
|
||||
{
|
||||
title: 'Sandwich',
|
||||
name: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'The past increases. The future recedes.',
|
||||
name: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
@ -98,7 +115,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
activeMenuItemName: null,
|
||||
collapsed: true
|
||||
collapsed: true,
|
||||
menuItems
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,73 +4,90 @@ You can set `default-expanded-names` to make menu work in an uncontrolled manner
|
||||
<n-menu
|
||||
v-model="activeName"
|
||||
:default-expanded-names="defaultExpandedNames"
|
||||
:items="menuItems"
|
||||
@expanded-names-change="handleExpandedNamesChange"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<n-menu-item title="Hear the Wind Sing" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Pinball, 1973" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Rat" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="A Wild Sheep Chase" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Dance Dance Dance" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="Characters">
|
||||
<n-menu-item title="Narrator" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="Sheep Man" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="Beverage" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Whisky" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="Food" name="food">
|
||||
<n-menu-item title="Sandwich" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="The past increases. The future recedes." name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
/>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: 'Hear the Wind Sing',
|
||||
name: 'hear-the-wind-sing',
|
||||
icon: h => h('n-icon', [h(bookIcon)])
|
||||
},
|
||||
{
|
||||
title: 'Pinball, 1973',
|
||||
name: 'pinball-1973',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
title: 'Rat',
|
||||
name: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'A Wild Sheep Chase',
|
||||
name: 'a-wild-sheep-chase',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'Dance Dance Dance',
|
||||
name: 'dance-dance-dance',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
title: 'Characters',
|
||||
children: [
|
||||
{
|
||||
title: 'Narrator',
|
||||
name: 'narrator',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
},
|
||||
{
|
||||
title: 'Sheep Man',
|
||||
name: 'sheep-man',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Beverage',
|
||||
name: 'beverage',
|
||||
icon: h => h('n-icon', [h(wineIcon)]),
|
||||
children: [
|
||||
{
|
||||
title: 'Whisky',
|
||||
name: 'whisky'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Food',
|
||||
name: 'food',
|
||||
children: [
|
||||
{
|
||||
title: 'Sandwich',
|
||||
name: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'The past increases. The future recedes.',
|
||||
name: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
@ -80,7 +97,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
defaultExpandedNames: ['dance-dance-dance', 'food'],
|
||||
activeName: null
|
||||
activeName: null,
|
||||
menuItems
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -4,71 +4,88 @@ A horiziontal menu.
|
||||
<n-menu
|
||||
v-model="activeName"
|
||||
mode="horizontal"
|
||||
>
|
||||
<n-menu-item title="Hear the Wind Sing" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Pinball, 1973" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Rat" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="A Wild Sheep Chase" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Dance Dance Dance" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="Characters">
|
||||
<n-menu-item title="Narrator" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="Sheep Man" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="Beverage" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Whisky" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="Food" name="food">
|
||||
<n-menu-item title="Sandwich" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="The past increases. The future recedes." name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
:items="menuItems"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: 'Hear the Wind Sing',
|
||||
name: 'hear-the-wind-sing',
|
||||
icon: h => h('n-icon', [h(bookIcon)])
|
||||
},
|
||||
{
|
||||
title: 'Pinball, 1973',
|
||||
name: 'pinball-1973',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
title: 'Rat',
|
||||
name: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'A Wild Sheep Chase',
|
||||
name: 'a-wild-sheep-chase',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'Dance Dance Dance',
|
||||
name: 'dance-dance-dance',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
title: 'Characters',
|
||||
children: [
|
||||
{
|
||||
title: 'Narrator',
|
||||
name: 'narrator',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
},
|
||||
{
|
||||
title: 'Sheep Man',
|
||||
name: 'sheep-man',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Beverage',
|
||||
name: 'beverage',
|
||||
icon: h => h('n-icon', [h(wineIcon)]),
|
||||
children: [
|
||||
{
|
||||
title: 'Whisky',
|
||||
name: 'whisky'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Food',
|
||||
name: 'food',
|
||||
children: [
|
||||
{
|
||||
title: 'Sandwich',
|
||||
name: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'The past increases. The future recedes.',
|
||||
name: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
@ -78,7 +95,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
activeName: null,
|
||||
collapsed: true
|
||||
collapsed: true,
|
||||
menuItems
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,71 +5,88 @@ You can specify `indent` & `root-indent` of the menu. `root-indent` only determi
|
||||
v-model="activeName"
|
||||
:root-indent="36"
|
||||
:indent="12"
|
||||
>
|
||||
<n-menu-item title="Hear the Wind Sing" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Pinball, 1973" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Rat" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="A Wild Sheep Chase" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Dance Dance Dance" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="Characters">
|
||||
<n-menu-item title="Narrator" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="Sheep Man" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="Beverage" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Whisky" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="Food" name="food">
|
||||
<n-menu-item title="Sandwich" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="The past increases. The future recedes." name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
:items="menuItems"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: 'Hear the Wind Sing',
|
||||
name: 'hear-the-wind-sing',
|
||||
icon: h => h('n-icon', [h(bookIcon)])
|
||||
},
|
||||
{
|
||||
title: 'Pinball, 1973',
|
||||
name: 'pinball-1973',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
title: 'Rat',
|
||||
name: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'A Wild Sheep Chase',
|
||||
name: 'a-wild-sheep-chase',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'Dance Dance Dance',
|
||||
name: 'dance-dance-dance',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
title: 'Characters',
|
||||
children: [
|
||||
{
|
||||
title: 'Narrator',
|
||||
name: 'narrator',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
},
|
||||
{
|
||||
title: 'Sheep Man',
|
||||
name: 'sheep-man',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Beverage',
|
||||
name: 'beverage',
|
||||
icon: h => h('n-icon', [h(wineIcon)]),
|
||||
children: [
|
||||
{
|
||||
title: 'Whisky',
|
||||
name: 'whisky'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Food',
|
||||
name: 'food',
|
||||
children: [
|
||||
{
|
||||
title: 'Sandwich',
|
||||
name: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'The past increases. The future recedes.',
|
||||
name: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
@ -78,7 +95,8 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: null
|
||||
activeName: null,
|
||||
menuItems
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,72 +18,51 @@ collapse
|
||||
### Menu Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||||
|collapsed|`boolean`|`false`|The collapsed status of menu, only works when menu is vertical.|
|
||||
|collapsed-width|`number`|`null`|The menu width after collapsed.|
|
||||
|icon-size|`number`|`20`|The icon size when menu is not collapsed.|
|
||||
|collapsed-icon-size|`number`|`null`|The icon size when menu is collapsed. If not set, menu will use `icon-size` in place of it.|
|
||||
|overlay-width|`number \| string`|`null`|The width of submenu popover. Works when menu is horizontal or collapsed.|
|
||||
|overlay-min-width|`number \| string`|`180`|The min width of submenu popover. Works when menu is horizontal or collapsed.|
|
||||
|root-indent|`number`|`null`|The indent of menu's first level children. If not set, menu will use `indent` in place of it.|
|
||||
|indent|`number`|`32`|The indend of menu|
|
||||
|collapsed-width|`number`|`null`|The menu width after collapsed.|
|
||||
|default-expanded-names|`Array<string>`|`[]`|The default expanded submenu names of menu in uncontrolled manner.|
|
||||
|expandedNames|`Array<string>`|`undefined`|The expanded submenu names. If set, menu will work in controlled manner and `default-expanded-names` won't work.|
|
||||
|value|`string`|`null`|The selected name of menu.|
|
||||
|items|`Array<MenuItem \| Submenu \| MenuItemGroup>`|`[]`|Items data of menu.|
|
||||
|icon-size|`number`|`20`|The icon size when menu is not collapsed.|
|
||||
|indent|`number`|`32`|The indend of menu|
|
||||
|mode|`'vertical' \| 'horizontal'`|`'vertical'`||
|
||||
|overlay-min-width|`number \| string`|`180`|The min width of submenu popover. Works when menu is horizontal or collapsed.|
|
||||
|overlay-width|`number \| string`|`null`|The width of submenu popover. Works when menu is horizontal or collapsed.|
|
||||
|root-indent|`number`|`null`|The indent of menu's first level children. If not set, menu will use `indent` in place of it.|
|
||||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||||
|value|`string`|`null`|The selected name of menu.|
|
||||
|
||||
### Menu Item Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|title-extra|`string`|`null`||
|
||||
|name|`string`||The indentifier of the menu item. **required**|
|
||||
|disabled|`boolean`|||
|
||||
|
||||
### Submenu Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|title-extra|`string`|`null`||
|
||||
|name|`string`||The indentifier of the submenu. **required**|
|
||||
|disabled|`boolean`|||
|
||||
|
||||
### Menu Item Group Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|
||||
## Slots
|
||||
### Menu Slots
|
||||
|Name|Parameters|Description|
|
||||
### MenuItem Properties
|
||||
|Name|Type|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|disabled|`boolean`||
|
||||
|icon|`(h: createElement) => VNode`||
|
||||
|name|`string`|The indentifier of the menu item. **required**|
|
||||
|title|`string`||
|
||||
|title-extra|`string`||
|
||||
|
||||
### Menu Item Slots
|
||||
|Name|Parameters|Description|
|
||||
### Submenu Properties
|
||||
|Name|Type|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|extra|`()`|Meta info near title|
|
||||
|icon|`()`||
|
||||
|children|`Array<MenuItem \| Submenu \| MenuItemGroup>`|**required**|
|
||||
|disabled|`boolean`||
|
||||
|icon|`(h: createElement) => VNode`||
|
||||
|name|`string`|The indentifier of the submenu. **required**|
|
||||
|title|`string`||
|
||||
|title-extra|`string`||
|
||||
|type|`'submenu'`|**required**|
|
||||
|
||||
### Submenu Slots
|
||||
|Name|Parameters|Description|
|
||||
### MenuItemGroup Properties
|
||||
|Name|Type|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|header|`()`||
|
||||
|header-extra|`()`||
|
||||
|icon|`()`||
|
||||
|
||||
### Menu Item Group Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|header|`()`||
|
||||
|children|`Array<MenuItem \| Submenu \| MenuItemGroup>`|**required**|
|
||||
|title|`string`||
|
||||
|type|`'group'`|**required**|
|
||||
|
||||
## Events
|
||||
### Menu Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|select|`(selectedName: string)`||
|
||||
|expanded-names-change|`(expandedNames: Array<string>)`||
|
||||
|
||||
|select|`(selectedName: string)`||
|
||||
|
||||
@ -1,96 +0,0 @@
|
||||
# items
|
||||
```html
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
@expandedNamesChange="changeOpen"
|
||||
>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
items: [
|
||||
{
|
||||
title: 'num1',
|
||||
name: 'num1',
|
||||
},
|
||||
{
|
||||
title: 'num2',
|
||||
name: 'num2',
|
||||
},
|
||||
{
|
||||
title: 'num3',
|
||||
name: 'num3',
|
||||
},
|
||||
{
|
||||
title: 'subMenu',
|
||||
name: 'subMenu',
|
||||
children: [
|
||||
{
|
||||
title:'sub1',
|
||||
name: 'sub1',
|
||||
group: true,
|
||||
children: [
|
||||
{
|
||||
title: 'subsub001',
|
||||
name: 'subsub001'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'subMenu2',
|
||||
name: 'subMenu2',
|
||||
children: [
|
||||
{
|
||||
group: true,
|
||||
title:'sub2',
|
||||
name: 'sub2',
|
||||
children: [
|
||||
{
|
||||
title: 'subsub002',
|
||||
name: 'subsub002'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'subMenu3',
|
||||
name: 'subMenu3',
|
||||
children: [
|
||||
{
|
||||
group: true,
|
||||
title:'sub3',
|
||||
name: 'sub3',
|
||||
children: [
|
||||
{
|
||||
title: 'subsub003',
|
||||
name: 'subsub003'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSelect (val) {
|
||||
console.log('changeSelect', val)
|
||||
},
|
||||
changeOpen (val) {
|
||||
console.log('changeOpen', val)
|
||||
this.opens = val
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
|
||||
```
|
||||
@ -16,66 +16,9 @@
|
||||
:collapsed="collapsed"
|
||||
:collapsed-width="64"
|
||||
:collapsed-icon-size="22"
|
||||
:items="menuItems"
|
||||
v-model="activeMenuItemName"
|
||||
>
|
||||
<n-menu-item title="且听风吟" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="1973年的弹珠玩具" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="鼠" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="寻羊冒险记" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="舞，舞，舞" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="人物">
|
||||
<n-menu-item title="叙事者" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="羊男" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="饮品" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="威士忌" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="食物" name="food">
|
||||
<n-menu-item title="三明治" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="过去增多，未来减少" name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
/>
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-content>
|
||||
@ -89,6 +32,80 @@ import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: '且听风吟',
|
||||
name: 'hear-the-wind-sing',
|
||||
icon: h => h('n-icon', [h(bookIcon)])
|
||||
},
|
||||
{
|
||||
title: '1973年的弹珠玩具',
|
||||
name: 'pinball-1973',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
title: '鼠',
|
||||
name: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '寻羊冒险记',
|
||||
name: 'a-wild-sheep-chase',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '舞，舞，舞',
|
||||
name: 'dance-dance-dance',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
title: '人物',
|
||||
children: [
|
||||
{
|
||||
title: '叙事者',
|
||||
name: 'narrator',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
},
|
||||
{
|
||||
title: '羊男',
|
||||
name: 'sheep-man',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '饮品',
|
||||
name: 'beverage',
|
||||
icon: h => h('n-icon', [h(wineIcon)]),
|
||||
children: [
|
||||
{
|
||||
title: '威士忌',
|
||||
name: 'whisky'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '食物',
|
||||
name: 'food',
|
||||
children: [
|
||||
{
|
||||
title: '三明治',
|
||||
name: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '过去增多，未来减少',
|
||||
name: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
@ -98,7 +115,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
activeMenuItemName: null,
|
||||
collapsed: true
|
||||
collapsed: true,
|
||||
menuItems
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,73 +4,90 @@
|
||||
<n-menu
|
||||
v-model="activeName"
|
||||
:default-expanded-names="defaultExpandedNames"
|
||||
:items="menuItems"
|
||||
@expanded-names-change="handleExpandedNamesChange"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<n-menu-item title="且听风吟" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="1973年的弹珠玩具" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="鼠" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="寻羊冒险记" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="舞，舞，舞" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="人物">
|
||||
<n-menu-item title="叙事者" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="羊男" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="饮品" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="威士忌" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="食物" name="food">
|
||||
<n-menu-item title="三明治" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="过去增多，未来减少" name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
/>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: '且听风吟',
|
||||
name: 'hear-the-wind-sing',
|
||||
icon: h => h('n-icon', [h(bookIcon)])
|
||||
},
|
||||
{
|
||||
title: '1973年的弹珠玩具',
|
||||
name: 'pinball-1973',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
title: '鼠',
|
||||
name: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '寻羊冒险记',
|
||||
name: 'a-wild-sheep-chase',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '舞，舞，舞',
|
||||
name: 'dance-dance-dance',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
title: '人物',
|
||||
children: [
|
||||
{
|
||||
title: '叙事者',
|
||||
name: 'narrator',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
},
|
||||
{
|
||||
title: '羊男',
|
||||
name: 'sheep-man',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '饮品',
|
||||
name: 'beverage',
|
||||
icon: h => h('n-icon', [h(wineIcon)]),
|
||||
children: [
|
||||
{
|
||||
title: '威士忌',
|
||||
name: 'whisky'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '食物',
|
||||
name: 'food',
|
||||
children: [
|
||||
{
|
||||
title: '三明治',
|
||||
name: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '过去增多，未来减少',
|
||||
name: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
@ -80,7 +97,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
defaultExpandedNames: ['dance-dance-dance', 'food'],
|
||||
activeName: null
|
||||
activeName: null,
|
||||
menuItems
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -4,71 +4,88 @@
|
||||
<n-menu
|
||||
v-model="activeName"
|
||||
mode="horizontal"
|
||||
>
|
||||
<n-menu-item title="且听风吟" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="1973年的弹珠玩具" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="鼠" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="寻羊冒险记" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="舞，舞，舞" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="人物">
|
||||
<n-menu-item title="叙事者" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="羊男" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="饮品" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="威士忌" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="食物" name="food">
|
||||
<n-menu-item title="三明治" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="过去增多，未来减少" name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
:items="menuItems"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: '且听风吟',
|
||||
name: 'hear-the-wind-sing',
|
||||
icon: h => h('n-icon', [h(bookIcon)])
|
||||
},
|
||||
{
|
||||
title: '1973年的弹珠玩具',
|
||||
name: 'pinball-1973',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
title: '鼠',
|
||||
name: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '寻羊冒险记',
|
||||
name: 'a-wild-sheep-chase',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '舞，舞，舞',
|
||||
name: 'dance-dance-dance',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
title: '人物',
|
||||
children: [
|
||||
{
|
||||
title: '叙事者',
|
||||
name: 'narrator',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
},
|
||||
{
|
||||
title: '羊男',
|
||||
name: 'sheep-man',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '饮品',
|
||||
name: 'beverage',
|
||||
icon: h => h('n-icon', [h(wineIcon)]),
|
||||
children: [
|
||||
{
|
||||
title: '威士忌',
|
||||
name: 'whisky'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '食物',
|
||||
name: 'food',
|
||||
children: [
|
||||
{
|
||||
title: '三明治',
|
||||
name: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '过去增多，未来减少',
|
||||
name: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
@ -78,7 +95,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
activeName: null,
|
||||
collapsed: true
|
||||
collapsed: true,
|
||||
menuItems
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,71 +5,88 @@
|
||||
v-model="activeName"
|
||||
:root-indent="36"
|
||||
:indent="12"
|
||||
>
|
||||
<n-menu-item title="且听风吟" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="1973年的弹珠玩具" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="鼠" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="寻羊冒险记" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="舞，舞，舞" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="人物">
|
||||
<n-menu-item title="叙事者" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="羊男" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="饮品" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="威士忌" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="食物" name="food">
|
||||
<n-menu-item title="三明治" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="过去增多，未来减少" name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
:items="menuItems"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: '且听风吟',
|
||||
name: 'hear-the-wind-sing',
|
||||
icon: h => h('n-icon', [h(bookIcon)])
|
||||
},
|
||||
{
|
||||
title: '1973年的弹珠玩具',
|
||||
name: 'pinball-1973',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
title: '鼠',
|
||||
name: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '寻羊冒险记',
|
||||
name: 'a-wild-sheep-chase',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '舞，舞，舞',
|
||||
name: 'dance-dance-dance',
|
||||
icon: h => h('n-icon', [h(bookIcon)]),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
title: '人物',
|
||||
children: [
|
||||
{
|
||||
title: '叙事者',
|
||||
name: 'narrator',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
},
|
||||
{
|
||||
title: '羊男',
|
||||
name: 'sheep-man',
|
||||
icon: h => h('n-icon', [h(personIcon)])
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '饮品',
|
||||
name: 'beverage',
|
||||
icon: h => h('n-icon', [h(wineIcon)]),
|
||||
children: [
|
||||
{
|
||||
title: '威士忌',
|
||||
name: 'whisky'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '食物',
|
||||
name: 'food',
|
||||
children: [
|
||||
{
|
||||
title: '三明治',
|
||||
name: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '过去增多，未来减少',
|
||||
name: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
@ -78,7 +95,8 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: null
|
||||
activeName: null,
|
||||
menuItems
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,72 +18,51 @@ collapse
|
||||
### Menu Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||||
|collapsed|`boolean`|`false`|菜单是否折叠，值在菜单为垂直时有用|
|
||||
|collapsed-width|`number`|`null`|折叠后菜单的宽度|
|
||||
|icon-size|`number`|`20`|菜单未折叠时图标的大小|
|
||||
|collapsed-icon-size|`number`|`null`|菜单折叠时图标的大小，如果为设定则使用 `icon-size` 代替|
|
||||
|collapsed-width|`number`|`null`|折叠后菜单的宽度|
|
||||
|default-expanded-names|`Array<string>`|`[]`|在非受控状态下默认展开的子菜单标识符数组|
|
||||
|expandedNames|`Array<string>`|`undefined`|展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，`default-expanded-names` 不会生效|
|
||||
|icon-size|`number`|`20`|菜单未折叠时图标的大小|
|
||||
|indent|`number`|`32`|菜单每级的缩进|
|
||||
|mode|`'vertical' \| 'horizontal'`|`'vertical'`||
|
||||
|overlay-width|`number \| string`|`null`|弹出子菜单的宽度，只在菜单为水平或者折叠时生效|
|
||||
|overlay-min-width|`number \| string`|`180`|弹出子菜单的最小宽度，只在菜单为水平或者折叠时生效|
|
||||
|root-indent|`number`|`null`|菜单第一级的缩进，如果没有设定，使用 `indent` 代替|
|
||||
|indent|`number`|`32`|菜单每级的缩进|
|
||||
|default-expanded-names|`Array<string>`|`[]`|在非受控状态下默认展开的子菜单标识符数组|
|
||||
|expandedNames|`Array<string>`|`undefined`|展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，`default-expanded-names` 不会生效|
|
||||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||||
|value|`string`|`null`|菜单当前的选中值|
|
||||
|mode|`'vertical' \| 'horizontal'`|`'vertical'`||
|
||||
|
||||
### Menu Item Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|title-extra|`string`|`null`||
|
||||
|name|`string`||菜单项的标识符，**必需**|
|
||||
|disabled|`boolean`|||
|
||||
|
||||
### Submenu Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|title-extra|`string`|`null`||
|
||||
|name|`string`||子菜单的标识符，**必需**|
|
||||
|disabled|`boolean`|||
|
||||
|
||||
### Menu Item Group Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|
||||
## Slots
|
||||
### Menu Slots
|
||||
|名称|参数|说明|
|
||||
### MenuItem Properties
|
||||
|名称|类型|说明|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|disabled|`boolean`||
|
||||
|icon|`(h: createElement) => VNode`||
|
||||
|name|`string`|菜单项的标识符，**必需**|
|
||||
|title|`string`||
|
||||
|title-extra|`string`||
|
||||
|
||||
### Menu Item Slots
|
||||
|名称|参数|说明|
|
||||
### Submenu Properties
|
||||
|名称|类型|说明|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|extra|`()`|标题旁边的额外信息|
|
||||
|icon|`()`||
|
||||
|children|`Array<MenuItem \| Submenu \| MenuItemGroup>`|**必需**|
|
||||
|disabled|`boolean`||
|
||||
|icon|`(h: createElement) => VNode`||
|
||||
|name|`string`|菜单项的标识符，**必需**|
|
||||
|title|`string`||
|
||||
|title-extra|`string`||
|
||||
|type|`'submenu'`|**必需**|
|
||||
|
||||
### Submenu Slots
|
||||
|名称|参数|说明|
|
||||
### MenuItemGroup Properties
|
||||
|名称|类型|说明|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|header|`()`||
|
||||
|header-extra|`()`||
|
||||
|icon|`()`||
|
||||
|
||||
### Menu Item Group Slots
|
||||
|名称|参数|说明|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|header|`()`||
|
||||
|children|`Array<MenuItem \| Submenu \| MenuItemGroup>`|**必需**|
|
||||
|title|`string`||
|
||||
|type|`'group'`|**必需**|
|
||||
|
||||
## Events
|
||||
### Menu Events
|
||||
|名称|参数|说明|
|
||||
|-|-|-|
|
||||
|select|`(selectedName: string)`||
|
||||
|expanded-names-change|`(expandedNames: Array<string>)`||
|
||||
|select|`(selectedName: string)`||
|
||||
|
||||
|
||||
@ -5,6 +5,8 @@ import MenuItem from './MenuItem.vue'
|
||||
import Submenu from './Submenu.vue'
|
||||
import MenuItemGroup from './MenuItemGroup.vue'
|
||||
|
||||
// Todo remove unnecessary attrs
|
||||
// Todo refactor to remove slot
|
||||
export default {
|
||||
name: 'NMenu',
|
||||
functional: true,
|
||||
@ -24,7 +26,10 @@ export default {
|
||||
delete props.title
|
||||
scopedSlots.header = item.title
|
||||
}
|
||||
if (item.group) {
|
||||
if (typeof item.icon === 'function') {
|
||||
scopedSlots.icon = () => item.icon(h)
|
||||
}
|
||||
if (item.group || item.type === 'group') {
|
||||
return h(MenuItemGroup, {
|
||||
props,
|
||||
scopedSlots
|
||||
@ -41,6 +46,9 @@ export default {
|
||||
delete props.title
|
||||
scopedSlots.default = item.title
|
||||
}
|
||||
if (typeof item.icon === 'function') {
|
||||
scopedSlots.icon = () => item.icon(h)
|
||||
}
|
||||
return h(MenuItem, {
|
||||
props,
|
||||
scopedSlots
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<li
|
||||
class="n-menu-item"
|
||||
:class="{
|
||||
'n-menu-item--selected': selected
|
||||
'n-menu-item--selected': selected,
|
||||
'n-menu-item--disabled': disabled
|
||||
}"
|
||||
>
|
||||
<template v-if="renderContentAsPopover">
|
||||
@ -46,7 +47,7 @@
|
||||
<slot name="icon" />
|
||||
</template>
|
||||
<template v-if="$scopedSlots['header-extra']" v-slot:header-extra>
|
||||
<slot name="header" />
|
||||
<slot name="header-extra" />
|
||||
</template>
|
||||
<slot />
|
||||
</n-menu-item-content>
|
||||
|
||||
@ -30,10 +30,13 @@
|
||||
@include b(menu-list) {
|
||||
@include once {
|
||||
display: flex;
|
||||
@include b(submenu) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@include b(menu-item) {
|
||||
margin: 0;
|
||||
@include once {
|
||||
margin: 0;
|
||||
&::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
@ -74,7 +77,6 @@
|
||||
}
|
||||
@include b(menu-item-content) {
|
||||
@include once {
|
||||
|
||||
@include b(menu-item-content-header) {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -100,15 +102,17 @@
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
list-style: none;
|
||||
height: 42px;
|
||||
margin: 6px 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
@include b(submenu) {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-top: 6px;
|
||||
@include b(menu-item-content) {
|
||||
height: 42px;
|
||||
}
|
||||
@include b(submenu-content) {
|
||||
overflow: hidden; // margin overlay work around, Todo, refactor
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@include fade-in-height-expand-transition($duration: .2s);
|
||||
@ -131,9 +135,11 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
&::after {
|
||||
background-color: $--menu-item-background-color;
|
||||
@include not-m(disabled) {
|
||||
&:active {
|
||||
&::after {
|
||||
background-color: $--menu-item-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(selected) {
|
||||
@ -167,6 +173,7 @@
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
padding-right: 12px;
|
||||
@include m(disabled) {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
@ -205,7 +212,7 @@
|
||||
width: 6px;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: calc(50% - 3px);
|
||||
top: calc(50% - 2px);
|
||||
transform: rotate(45deg) ;
|
||||
transform-origin: 25% 25%;
|
||||
opacity: 1;
|
||||
@ -219,6 +226,8 @@
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
color: map-get($--menu-item-content-text-color, 'default');
|
||||
@include e(extra) {
|
||||
@ -285,6 +294,7 @@
|
||||
}
|
||||
@include b(menu-item-group) {
|
||||
@include b(menu-item-group-title) {
|
||||
margin-top: 6px;
|
||||
color: $--menu-item-group-text-color;
|
||||
@include once {
|
||||
cursor: default;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user