navigation-iview

一级导航，二级导航，返回取消操作

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

安装

npm install navigation-iview -S

引用

import Navigation from 'navigation-iview' Vue.use(Navigation)

一级导航

    <header-view    :theme="theme"
                    :logo='logo'
                    :menuList='menuList'
                    :fenNav='fenNav'
                    @on-update-select='updateSelect'
                    @on-update-theme='updateTheme'>
        <template slot="g-nav-r">
        </template>
        <template slot="g-nav-logo">
        </template>
    </header-view>

参数详解

    theme ：'dark'   // 黑色背景
            'light'  // 白色背景
    logo  :  导航logo处信息   
    menuList : 中间导航信息   
        //导航传参
            menuName:'首页', //导航名
            matchPath:'/channels',
            url:'',   //跳转链接一选一
            route:{   //跳转链接二选一
                name:"",
                query:{},
                params:{}
            },
            children:[], //导航下子导航
            theme:'dark',//主题
            icon:{        
                light: require('./img/logo-3ren-light.png'),  // 对应主题下显示logo图设置
                dark: require('./img/logo-3ren-dark.png')     // 对应主题下显示logo图设置
            } 

插槽
    g-navi-logo : 导航logo处
    g-nav-r     ： 导航右侧插槽
事件
    on-update-select ： 导航选项切换事件  
                        返回值   nowMenu：当前所选导航 ,menu：所选导航对应的一级菜单 ,itemIndex：导航顺序下标
    on-update-theme  ： 导航主题触发切换事件
                        返回值   theme:  当前对应主题

二级菜单

    <navigation-secondary :show="showSecondary"
                          :secondary-select.sync="secondarySelect"
                          :secondary-info="secondaryInfo"></navigation-secondary>

参数详解
show : 是否显示二级菜单
secondary-select : 当前二级菜单所选项下标   .sync双向绑定
secondary-info ： 二级菜单的信息   

返回

    <header-back :back-info="backInfo" 
                 @cancel="cancel"></header-back> 

参数
back-info ： title：返回标题文字
             middle：中间区域文字
             tit:右侧提示文字
插槽
back-style ： 返回导航按钮样式自定义插槽
back-title ： 返回导航标题插槽
back-middle ：返回导航中间插槽
back-tit   :  返回导航右侧提示插槽
事件
cancel ：默认返回事件触发