naive-ui/demo/documentation/components/menu/enUS/basic.md
2020-01-15 15:22:29 +08:00

45 lines
1.1 KiB
Markdown

# Basic
```html
<div>
<n-menu
v-model="selected"
@openNamesChange="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)
}
}
};
```