@58fe/p5/src/doc/menu.md

pc端vue组件

<script>
	module.exports = {
		data() {
			return {
				mode: 'vertical',
				theme: 'dark',
				collapsed: true
			}
		},
		methods: {
			select(name) {
				console.log(name);
			}
		}
	}
</script>
<style lang="scss">

</style>
## 导航
这里是导航

```javascript
import { menu, menuItem, subMenu } from '@58fe/p5';
```
引用的组件使用过程中，可以加前缀`p5-`进行使用，`p5-menu`, `p5-menu-item`, `p5-menu-submenu `

### 基本用法

设置`active-name`可以指定选中的菜单

:::demo 按钮

```html
<p5-menu active-name="3" @on-select="select">
	<p5-menu-item name="1">
		<icon name="appstore"></icon>
		Nav one
	</p5-menu-item>
	<p5-menu-submenu name="2">
		<template v-slot:title>
			<icon name="setting"></icon>
			Nav two-submenu
		</template>
		<p5-menu-item name="2-1">option 1</p5-menu-item>
		<p5-menu-item name="2-2">option 2</p5-menu-item>
	</p5-menu-submenu>
	<p5-menu-item name="3">
		<icon name="edit"></icon>
		Nav three
	</p5-menu-item>
</p5-menu>
<script>
export default {
	module.exports = {
		methods: {
			select(name) {
				console.log(name);
			}
		}
	}
};
</script>
```

:::

## 主题
选择主题 `theme`为`light`、`dark`两种模式，默认为`light`。
:::demo 按钮

```html
<p5-menu active-name="3" mode="horizontal" :theme=theme>
	<p5-menu-item name="1">
		<icon name="appstore"></icon>
		Nav one
	</p5-menu-item>
	<p5-menu-submenu name="2">
		<template v-slot:title>
			<icon name="setting"></icon>
			Nav two-submenu
		</template>
		<p5-menu-item name="2-1">option 1</p5-menu-item>
		<p5-menu-item name="2-2">option 2</p5-menu-item>
	</p5-menu-submenu>
	<p5-menu-item name="3">
		<icon name="edit"></icon>
		Nav three
	</p5-menu-item>
</p5-menu>
<br/>
<btn @click="theme='light'">light</btn>
<btn @click="theme='dark'">dark</btn>

<script>
export default {
	module.exports = {
		data() {
			return {
				theme: 'dark'
			}
		}
	}
};
</script>
```

:::

## 方向
选择主题 `mode`为`horizontal`、`vertical`两种模式，默认为`vertical`。
:::demo 按钮

```html
<p5-menu active-name="3" theme="dark" :mode="mode">
	<p5-menu-item name="1">
		<icon name="appstore"></icon>
		<span class="collapsed-span">Nav one</span>
	</p5-menu-item>
	<p5-menu-submenu name="2">
		<template v-slot:title>
			<icon name="setting"></icon>
			<span class="collapsed-span">Nav two-submenu</span>
		</template>
		<p5-menu-item name="2-1">option 1</p5-menu-item>
		<p5-menu-item name="2-2">option 2</p5-menu-item>
	</p5-menu-submenu>
	<p5-menu-item name="3">
		<icon name="edit"></icon>
		<span class="collapsed-span">Nav three</span>
	</p5-menu-item>
</p5-menu>
<br/>
<btn @click="mode='vertical'">vertical</btn>
<btn @click="mode='horizontal'">horizontal</btn>
<script>
export default {
	module.exports = {
		data() {
			return {
				mode: 'vertical'
			}
		}
	}
};
</script>
```

:::

## 伸缩
缩起内嵌菜单，使用`collapsed`属性来控制，布尔值，默认为false。
其中，需要缩起来的部分，需要被class为`collapsed-span`所包裹。
:::demo 按钮

```html
<p5-menu active-name="3" theme="dark" mode="vertical" :collapsed=collapsed>
	<p5-menu-item name="1">
		<icon name="appstore"></icon>
		<span class="collapsed-menu">Nav one</span>
	</p5-menu-item>
	<p5-menu-submenu name="2">
		<template v-slot:title>
			<icon name="setting"></icon>
			<span class="collapsed-menu">Nav two-submenu</span>
		</template>
		<p5-menu-item name="2-1">option 1</p5-menu-item>
		<p5-menu-item name="2-2">option 2</p5-menu-item>
	</p5-menu-submenu>
	<p5-menu-item name="3">
		<icon name="edit"></icon>
		<span class="collapsed-menu">Nav three</span>
	</p5-menu-item>
</p5-menu>
<br/>
<btn @click="collapsed=true">off</btn>
<btn @click="collapsed=false">open</btn>
<script>
export default {
	module.exports = {
		data() {
			return {
				collapsed: true
			}
		}
	}
};
</script>
```

:::

### 参数

#### Menu

| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| mode         | 结构模式       | String |    'vertical', 'horizontal'      | 'vertical'     |
| activeName | 当前展开项      |    Number|String           | ——           | —— |
| theme | 菜单主题     |    String           | 'light', 'dark'           | 'light' |
| collapsed | 菜单是否可缩小     |    Boolean           |    ——       | false |


<br/>

#### MenuItem
| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| name         | 与activeName为同一个值，则为默认展开项       | Number|String | ——           |  ——     |

<br/>

#### SubMenu（子菜单项）
| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| name         | 与activeName为同一个值，则为默认展开项       | Number|String | ——           |  ——     |