VUE的菜单导航折叠

展示视频

 

展开的时候由一瞬间的空白，不知道怎么解决。

myMenu(子组件)：

在el-menu 标签里面设置collapse参数属性：


Props ：用来存储，其他组件传到本组件的值。 //这里是有父组件直接穿过来的值使用props来接收 props:['isCollapse'],


myContent（子组件）：

这个组件内是绑定点击折叠事件: 使用两个icon图标，绑定click函数。

使用v-if进行判定到底是显示哪一个icon图标（真执行if 加执行else）

子组件的isCollapse的值由父组件默认传递，开始都是父组件所设置的值也就是false。

鼠标点击的时候就调用这个changeMenu方法

$emit(参数1 ，参数2 ) ：

子组件可以调用父组件的方法（第一个参数是父组件的方法，第二个参数是值）

点击就会去调用父组件的changeshow函数进行isCollapse 值的取反。

 

isCollapse的值默认绑定的是false；也就是水平展开

要想内容区域也根据点击一起进行水平折叠，在父组件里面的Content 去绑定相应的事件或值。

：class动态数据绑定



:class="{small:isCollapse}  //这个是为了使得在折叠的时候，按钮的显示不被覆盖，所以绑定一个padding-left:64px,只有isCollapse 为 true的时候这个属性才会生效。

@作为 v-on指令的缩写  进行点击事件绑定

：作为v-bind的缩写 进行数据绑定

myLayout(父组件)：

：is-collapse   这里应该是和myContent组件里面的v-if函数有关系。

当isCollapse 为flase的时候， 也就是不折叠  ，这时候v-if 为真就显示向左的icon图标。

当idCollapse 为true的时候，这里的small  设置的样式就会生效，同时这个icon图标（向右）的显示由这个  is-Collapse的值（只有为true才会变化向右的图标）来控制。否则就是向左的图标，不会变化。