Nav 导航菜单

页面导航菜单，有水平和垂直两种布局风格。

引入方式

天翼云盘小程序工程中，不需要 import，直接使用组件标签即可。

import {Nav} from '@21cnfe/vui'
Vue.component('Nav', Nav)

代码演示

Nav 导航菜单 nav

基本用法在 :menuList 中传入菜单列表数组，@menuClick用于菜单点击响应处理

<template>
  <div>
    <div class="demoName">
    <a class="icon" @click="$router.push({path:'/'})"></a>
    <div class="comp-title">Nav</div>
    </div>
    <h3>使用方法</h3>
    <p>Basic</p>
    <Nav :menuList="menuList" @menuClick="menuClick" :activeIndex="activeIndex" />
    <p>Vertical</p>
    <Nav :menuList="menuList" @menuClick="menuClick" :activeIndex="activeIndex" orientation="vertical" />
  </div>
</template>
<script>
  export default {
    name: 'navExample',
    data () {
      return {
        menuList: [
          { name: 'nav 1' },
          { name: 'nav 2' },
          { name: 'nav 3' },
          { name: 'nav 4' },
          { name: 'nav 5' },
          { name: 'nav 6' },
          { name: 'nav 7' },
          { name: 'nav 8' },
          { name: 'nav 9' },
          { name: 'nav 10' }
        ],
        activeIndex: 0
      }
    },
    methods: {
      menuClick(menu) {
        this.menuList.map((item, index) => (item.name === menu.name) && (this.activeIndex = index));
      }
    }
  }
</script>

API

属性	说明	类型	默认值
`menuList`	导航菜单数组	Array	`[]`
`activeIndex`	高亮状态菜单索引	Number	`0`
`orientation`	菜单方向，水平或垂直（vertical），默认为水平	String	`''`

Event

事件名称	说明	回调参数
`menuClick`	菜单点击事件回调函数	menuItem

1. Nav 导航菜单