vue封装左侧导航栏组件demo

示例demo的样式：

然后说一下布局组件的调用逻辑

App-->layout-->sidebar-->sid_menu-->menu_item 

这里我使用覆盖element的样式的方式，达到项目需求，这里学到了很多如何定位dom元素的样式，使用css阴影，如何覆盖样式，如何使用css3的伪类，如何通过鼠标移动事件找到dom元素等

首先使用layout组件并设置样式，其作为左侧组件的容器，在项目中layout用来加载整个页面的布局，这里做的demo只做了左侧布局。

layout代码如下：

这里使用的是用prop传入参数的方式，递归遍历json数据展示菜单栏的方法，在sidebar 中使用阴影，这里列出阴影参数

h-shadow	v-shadow	blur	spread	color	inset
水平阴影	垂直阴影	模糊	尺寸	颜色	内外

sidebar代码如下

 sidemenu中主要是使用了element的样式，调整菜单栏的位置

最后是menuitem，主要的逻辑代码和样式覆盖代码

 总结：学到了很多css知识