展示视频
展开的时候由一瞬间的空白,不知道怎么解决。


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才会变化向右的图标)来控制。否则就是向左的图标,不会变化。

852

被折叠的 条评论
为什么被折叠?



