V-side-menu NPM

v-side-menu

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

view Demo

npm.io

Install

You can use Yarn or NPM

npm install v-side-menu

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' }
    ]
}