1.0.4 • Published 5 years ago
navigation-iview v1.0.4
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 :默认返回事件触发