EasyUI Forum

<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>