1.0.8 • Published 2 years ago
zy-sidebar v1.0.8
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 |