# PageFooter 固底操作栏

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-footer>
    <el-button type="primary">BTN</el-button>
  </h-page-footer>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-footer>
    <el-button type="primary">BTN</el-button>
    <template slot="rightAction">
      <el-button>BTN</el-button>
    </template>
  </h-page-footer>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-layout>
    <h-page-sidebar type="list" :affix="false" width="200px">
      <ul>
        <li
          v-for="(item, index) in sidebar"
          :key="index"
          :class="{ active: item === activeSidebar }"
          @click="handleClick(item)"
        >
          <span>{{ item }}</span>
        </li>
      </ul>
    </h-page-sidebar>
  </h-layout>
  <h-page-footer extra-left="200">
    <el-button type="primary">BTN</el-button>
  </h-page-footer>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title'],
        sidebar: [
          'Option1',
          'Option2',
          'Option3',
          'Option4',
          'Option5',
          'Option6',
          'Option7',
          'Option8'
        ],
        activeSidebar: 'Option1'
      }
    },
    methods: {
      handleClick(item) {
        this.activeSidebar = item;
      }
    }
  }
</script>