reactive-navigation-bar

a reactive navigation bar component that's based on element-ui. IE compatible

Install

npm install reactive-navigation-bar -S

Quick Start

import Vue from 'vue'
import ReactiveNavigationBar from 'reactive-navigation-bar'
# Vue.component('reactive-navigation-bar', ReactiveNavigationBar) # 可以指定组件名称
Vue.use(ReactiveNavigationBar) # 组件名称 `reactive-navigation-bar`

For more information, please refer to ReactiveNavigationBar in our documentation.

Build Setup

# install dependencies
npm install

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

# build for demo with minification
npm run demo:build

# build for gh-pages with minification
npm run demo:prepublish

# build for production with minification
npm run build

# generate gh-pages
npm run deploy

LICENSE

MIT

截图

基本用法

<template>
  <div class="vd-demo__block vd-demo__block-2">
    <reactive-navigation-bar
      :theme="theme"
      :data="dataList"
      :theme-color="color"
      width="calc(100% - 100px)"
    />
  </div>
</template>

<script>

<script>
  export default {
    data () {
      return {
        theme: 'light',
        dataList: [],
        color: '#1890ff'
      }
    },
    mounted() {
      this.dataList = [
        {
          title: 'Dashboard',
          hide: false,
          path: '1',
          icon: 'el-icon-s-tools',
          children: [
            {
              title: '分析页',
              hide: false,
              icon: 'el-icon-star-off',
              path: '1.1',
              disabled: true
            },
            {
              title: '监控页',
              icon: 'el-icon-s-operation',
              path: '1.2',
              hide: false
            },
            {
              title: '工作台',
              icon: 'el-icon-s-cooperation',
              path: '1.3',
              hide: false
            }
          ]
        },
        {
          title: '表单页',
          hide: false,
          icon: 'el-icon-s-order',
          children: [
            {
              title: '数据管理对象长长长长长长长',
              hide: false,
              path: '2.1',
              children: [{
                title: '数据管理对象长长长长长长长',
                hide: false,
                path: '2.1.1'
              }]
            },
            {
              title: '分步表单',
              hide: false,
              path: '2.2',
              children: [{
                title: '数据管',
                hide: false,
                path: '2.2.1'
              }]
            },
            {
              title: '高级表单',
              hide: false,
              path: '2.3'
            }
          ]
        },
        {
          title: '列表页',
          hide: false,
          path: '3',
          icon: 'el-icon-s-platform'
        },
        {
          title: '搜索列表',
          hide: false,
          path: '4.1',
          icon: 'el-icon-search',
          children: [
            {
              title: '搜索列表(文章)',
              hide: false,
              path: '4.1.1'
            },
            {
              title: '搜索列表(应用)',
              hide: false,
              disabled: true,
              path: '4.1.2'
            },
            {
              title: '搜索列表(项目)',
              hide: false,
              path: '4.1.3'
            }
          ]
        },
        {
          title: '详情页',
          hide: false,
          disabled: true,
          path: '5',
          icon: 'el-icon-s-claim'
        }
      ];
    },

    methods: {
      toggleColor() {
        if (this.color === '#ffd04b') {
          this.color = '#1890ff';
        } else {
          this.color = '#ffd04b';
        }
      },
      toggle() {
        if (this.theme === 'light') {
          this.theme = 'dark';
        } else {
          this.theme = 'light';
        }
      }
    }
  }
</script>

ReactiveNavigationBar props

参数	说明	类型	可选值	默认值
data	菜单	Array	-	-
default-active	默认选中项	String	-	-
route-mode	是否菜单选中只与当前路由route有关	Boolean	-	false
trigger	子菜单浮窗触发方法	String	hover, click	hover
theme	主题	String	light, dark	light
theme-color	主题颜色	String	-	#52c41a
background-color	背景颜色	String	-	当主题为light时，默认为#e6f7ff; 当主题为dark时，默认为#24292e
align	主菜单排列方式	String	fixed, fluid	fluid
width	主菜单宽度	Number, String	-	-
bar-height	主菜单高度	Number, String	-	56
menu-height	子菜单高度	Number, String	-	32
arrow	是否在主菜单内显示箭头	Boolean	-	true
bar-background-active	子菜单选中时是否改变主菜单背景颜色	Boolean	-	false
underline	选中时是否有下划线效果	Boolean	-	true
append-to-body	悬浮子菜单是否挂载到body上	Boolean	-	true
strict-align	子菜单宽度是否对齐主菜单	Boolean	-	true

ReactiveNavigationBar events

事件名称	说明	回调参数
select	菜单被选中时的事件	item, index, indexPath, event
open	开启子菜单浮窗的事件	item, index, indexPath
close	关闭子菜单浮窗的事件	item, index, indexPath

ReactiveNavigationBar data item prop

名称	说明	类型	可选值	默认值
icon	图标	String	-	-
title	标题	String	-	-
path	路由	String	-	-
hide	是否隐藏	Boolean	-	false
disabled	是否禁用	Boolean	-	false
children	子菜单数据	Array[Object]	-	[]
meta	辅助性属性(内含index时，index内容与是否选中有关)	Object	-	-

更新日志

• v1.1.1: 路由跳转兼容IE浏览器; 添加routeMode属性，支持纯路由的选中判断