# Layout 布局

  <template>
    <h3-button @click="demoA = true" type="primary">查看效果</h3-button>
    <h3-modal
      wrap-class-name="layout-md-modal"
      width="100vw"
      :footer="null"
      v-model="demoA">
      <div class="layout-demo">
        <!-- 示例代码 start-->
        <h3-layout
        left-sider-width="240"
        right-sider-width="400"
        :left-collapsed="leftCollapsed"
        :right-collapsed="rightCollapsed"
        >
          <template #header>
            <div class="layout-demo-a-header"></div>
          </template>
          <template #left>
            <div class="layout-demo-a-sider"></div>
          </template>
          <div class="layout-demo-a-content"
          style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
            <h3-button
            @click="onSwitch"
            type="primary"
            style="margin-left: 12px;">左右sider切换</h3-button>
            <h3-button
            @click="onLeftSwitch"
            type="primary"
            style="margin-left: 12px;">左sider切换</h3-button>
            <h3-button
            @click="onRightSwitch"
            type="primary"
            style="margin-left: 12px;">右sider切换</h3-button>
          </div>
          <template #right>
            <div class="layout-demo-a-sider"></div>
          </template>
        </h3-layout>
        <!-- 示例代码 end-->
      </div>
    </h3-modal>
  </template>
  <script>
    import {H3Layout, H3Button, H3Modal} from '@lateinos/awesome-ui';
    @Component({
      name: 'DemoA',
      components: {
        H3Layout,
        H3Button,
        H3Modal
      }
    })
    export default class DemoA extends Vue {
      leftCollapsed: boolean = false;
      rightCollapsed: boolean = true;
      demoA: boolean = false;

      onLeftSwitch () {
        this.leftCollapsed = !this.leftCollapsed;
        this.$message.success('左sider切换成功');
      }
      onRightSwitch  () {
        this.rightCollapsed = !this.rightCollapsed;
        this.$message.success('右sider切换成功');
      }
      onSwitch () {
        this.leftCollapsed = !this.leftCollapsed;
        this.rightCollapsed = !this.rightCollapsed;
        this.$message.success('左右sider切换成功');
      }
    }
  </script>