v-side-menu

An easy-to-use navigation component powered by Vue.js

view Demo

Install

You can use Yarn or NPM

npm install v-side-menu

OR

yarn add v-side-menu

Usage

// Import the components where you need it
import SideMenu from "v-side-menu";
export default {
    components: [SideMenu]
}

Props

| Name | Type | Default | Description | | ----------------- | --------- | ---------- | ---------------------------------------------------------------------------- | | menuList | Array | [] | Menu List,A two-dimensional array, each array is listed from left to right | | collectionList | Array | [] | Collection list | | historyList | Array | [] | Recent Access List | | collection | Boolean | true | Whether to display my collection | | history | Boolean | true | Whether to show recent visits | | search | Boolean | true | Whether to display search | | showDrawer | Boolean | false | Drawer switch | | drawerWidth | String | '1000px' | Drawer width | | drawerPlacement | String | 'left' | Drawer pull out direction | | drawerTop | String | '0px' | Distance between drawer and top | | drawerTitle | String | '' | Drawer title | | closable | Boolean | true | Whether to display the close button | | mask | Boolean | true | Whether to display the mask | | maskClosable | Boolean | true | Click to close the mask | | inner | Boolean | false | Whether to open in the parent element | | btnStyle | Object | {} | Customize the default menu button style |

Events

| Name | Parameters | Description | | ------------ | ------------------------------- | ----------------------------------------------------- | | goLink | arguments(item, historyData) | Return the currently clicked data & historyData | | addStar | arguments(item, collectionData) | Return the currently collected data & collectionData | | removeStar | arguments(item, collectionData) | Return the currently removed data & collectionData |

Examples

Example - Basic Setup

<template>
  <div id="app">
    <side-menu drawer-width="1200px" drawer-top="57px"
               :menu-list="menuList"
               :collection-list="collectionList"
               :history-list="historyList"
               @addStar="changeCallback(arguments)"
               @removeStar="changeCallback(arguments)"
               @goLink="goLink(arguments)">
    </side-menu>
  </div>
</template>
<script>
import SideMenu from "v-side-menu"
export default {
  components: {
    SideMenu
  },
  data() {
    return {
      menuList: [],
      collectionList: [],
      historyList: []
    }
  },
  methods: {
    // Jump to url
    goLink: function (msg) {
      console.log(msg[0]) // item
      console.log(msg[1]) // historyData
    },
    // Processing history and collection data
    changeCallback: function (msg) {
      console.log(msg[0]) // item
      console.log(msg[1]) // collectionData
    }
  }
};
</script>

Example - Customize menu buttons

<template>
  <div id="app">
    <side-menu drawer-width="1200px" drawer-top="57px"
               :drawer-show="open"
               :menu-list="menuList"
               :collection-list="collectionList"
               :history-list="historyList"
               @addStar="changeCallback(arguments)"
               @removeStar="changeCallback(arguments)"
               @goLink="goLink(arguments)">
      <button @click="open = !open">
        <span v-show="!open">点我展开</span>
        <span v-show="open">点我关闭</span>
      </button>
    </side-menu>
  </div>
</template>
<script>
import SideMenu from "v-side-menu"
export default {
  components: {
    SideMenu
  },
  data() {
    return {
      open: false,
      menuList: [],
      collectionList: [],
      historyList: []
    }
  },
  methods: {
    // Jump to url
    goLink: function (msg) {
      console.log(msg[0]) // item
      console.log(msg[1]) // historyData
    },
    // Processing history and collection data
    changeCallback: function (msg) {
      console.log(msg[0]) // item
      console.log(msg[1]) // collectionData
    }
  }
};
</script>

API DATA

// blank: Whether to open a new tab
// token: Whether the URL carries Token
// xxxxx: Define your own attributes
{
    menuList: [
        [
            {
                key: 'cloud_running',
                title: '云运营',
                id: 'cr',
                'sub': [
                    // 概览
                    { id: 'cr_1', key: 'cost_overview', title: '概览', link: '/cloud_overview' }
                ]
            }
        ],
        [
            {
                key: 'operation',
                title: '云运维',
                id: 'op',
                sub: [
                    // 概览
                    { id: 'op_1',  key: 'op_overview', title: '概览', link: '/op_overview', blank: true, token: true },
                    // 配置管理
                    { id: 'op_2',  key: 'op_config_manage', title: '配置管理', link: '/op_config_manage' }
                ]
            },
            {
                key: 'self_manage',
                title: '自服务',
                id: 'sm',
                'sub': [
                    // 概览
                    { id: 'sm_1', key: 'self_overview', title: '概览', link: '/cloud_overview' },
                    // 服务实例
                    { id: 'sm_2', key: 'service_instance', title: '服务实例', link: '/cloud_overview' }
                ]
            }
        ]
    ],
    historyList: [
        { id: 'op_1', key: 'op_overview', title: '概览', link: '/op_overview', blank: true, token: true }
    ],
    collectionList: [
        { id: 'sm_1', key: 'self_overview', title: '概览', link: '/cloud_overview' },
        { id: 'sm_2', key: 'service_instance', title: '服务实例', link: '/cloud_overview' }
    ]
}

License

MIT