Admin.UI/src/components/my-container/index.vue

（开头部分） 3KB

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

<template>
  <el-container class="my-container" style="height: 100%;">
    <el-aside
      v-if="showLeftAside"
      v-resizable="currentLeftAsideResizeOptions"
      :width="leftAsideWidth"
      :style="leftAsideStyle"
    >
      <slot name="left-aside" />
    </el-aside>
    <el-main style="height:100%;">
      <el-container style="height:100%;position:relative;">
        <el-header v-if="showHeader" height="auto" :style="headerStyle">
          <slot name="header" />
        </el-header>
        <el-main :style="mainStyle">
          <slot />
        </el-main>
        <el-footer v-if="showFooter" height :style="footerStyle">
          <slot name="footer" />
        </el-footer>
      </el-container>
    </el-main>
    <el-aside
      v-if="showRightAside"
      v-resizable="currentRightAsideResizeOptions"
      :width="rightAsideWidth"
      :style="rightAsideStyle"
    >
      <slot name="right-aside" />
    </el-aside>
  </el-container>
</template>

<script>
/**
 * 容器组件
 * 使用说明
<my-container>
  <template #header>
    <el-form />
  </template>
  <el-table />
  <template #footer>
    <my-pagination />
  </template>
</my-container>
 */
import resizable from '@/directive/resizable'

export default {
  name: 'MyContainer',
  directives: { resizable },
  props: {
    showHeader: {
      type: Boolean,
      default: true
    },
    showFooter: {
      type: Boolean,
后面还有 90 行代码，解锁后查看完整代码

24 小时内免费解锁 3 个项目，之后 1 积分/个。 规则说明

AI 解读

登录后可用，每次 10 积分，解读结果公开显示在下面。

还没有人解读过这个文件。