折叠左侧菜单，布局无法自动伸缩。
toggle SideMenu state,LayoutPanel don't auto resize
<template>
<Layout>
<LayoutPanel region="north" :border="false" bodyCls="cywebos-header">
<LinkButton @click="toggle">折叠</LinkButton>
</LayoutPanel>
<LayoutPanel :style="{width:width+'px'}" region="west" :border="false" bodyCls="cywebos-sidebar">
<SideMenu
:data="menus"
:collapsed="collapsed"
@selectionChange="selection=$event">
</SideMenu>
</LayoutPanel>
<LayoutPanel region="center" :border="false" bodyCls="cywebos-body" style="height:100%">
121221
</LayoutPanel>
</Layout>
</template>
<script>
export default {
data() {
return {
width: 230,
collapsed: false,
selection: null,
menus: [
{
text: "Item1",
iconCls: "icon-sum",
state: "open",
children: [
{
text: "Option1"
},
{
text: "Option2"
},
{
text: "Option3",
children: [
{
text: "Option31"
},
{
text: "Option32"
}
]
}
]
},
{
text: "Item2",
iconCls: "icon-more",
children: [
{
text: "Option4"
},
{
text: "Option5"
},
{
text: "Option6"
}
]
}
]
};
},
methods: {
toggle() {
this.collapsed = !this.collapsed;
this.width = this.collapsed ? 50 : 230;
}
}
};
</script>
<style>
.cywebos-header {
color: #fff;
height: 50px;
line-height: 50px;
background-color: #3c8dbc;
}
.cywebos-sidebar {
background-color: #1a2226;
}
.cywebos-body {
background: #ecf0f5;
}
</style>
