# navigation-iview

> navigation-iview

Latest version **1.0.4** (published 2019-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install navigation-iview
pnpm add navigation-iview
yarn add navigation-iview
bun add navigation-iview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-05-07 |
| First published | 2019-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | sunjinchen |
| Maintainers | yangersun |

## Links

- npm: https://www.npmjs.com/package/navigation-iview
- npm.io page: https://npm.io/package/navigation-iview

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [iview](https://npm.io/package/iview.md) ^2.10.0
- [jquery](https://npm.io/package/jquery.md) ^3.3.1

## Recent versions

- 1.0.4 (latest) — 2019-05-07
- 1.0.3 — 2019-05-07
- 1.0.2 — 2019-05-06
- 1.0.1 — 2019-05-05
- 1.0.0 — 2019-05-05

## README

# navigation-iview

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

## Build Setup

``` bash
# 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](http://vuejs.github.io/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 ：默认返回事件触发

---
_Source: https://npm.io/package/navigation-iview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._