zy-sidebar

npm address

npm address in here : https://www.npmjs.com/package/zy-sidebar

Explain

1 . sideBar Menu

2 . Support customization，for example: placeHolder 、 event 、 menuList ...

3 . normal search input and menuTree open

4 . .....(There will be more follow ups)

Usage

1.1 Installation

  npm i zy-sidebar

1.2 ES6 Import

import zySidebar from 'zy-sidebar';

export default {
  components: {
    zySidebar
  }
}

Basic Example

html

<template>
  <aside>
    <el-menu
      :default-active="xxx"
      :collapse="xxx"
      :collapseTransition="false"
      :unique-opened="true"
      class="site-sidebar__menu">
      <el-menu-item>
        <zy-sidebar placeHolder="请输入菜单名" :menuList="menuList" @route="gotoRouteHandle" :_renderHandle="renderHandle"></zy-sidebar>
      </el-menu-item>
    </el-menu>
  </aside>
</template>

js

import zySidebar from 'zy-sidebar';

export default {
  components: {
	  zySidebar
  },
  data() {
    return {
      menuList: [],
    }
  }
  },
  methods: {
    renderHandle(obj){
      return (<div><icon-svg name={obj.icon}></icon-svg><span style="padding-left:10px;">{obj.title}</span></div>)
    }
  }
}

Props

| props | type | default | description | | :---------: | :----: | :----------------: | :------------------------------: | | icon| String | "" | el-icon-search Input prompt| | placeHolder| String | "" | placeHolder Input prompt| | menuList | Array | [] | menuList source prompt | | _renderHandle| Function | () => {} | _renderHandle event render |