安装

npm i @my-admin/czl-layout

使用

...
<CzlLayout></CzlLayout>
...
...
import CzlLayout from "@my-admin/czl-layout";
...

例子

<template>
  <CzlLayout
    :mode="mode"
    :fixed-header-and-tab="fixedHeaderAndTab"
    :fixed-footer="fixedFooter"
    :sider-collapse="siderCollapse"
  >
    <template #header>
      <div class="header-placeholder">头部操作栏</div>
    </template>
    <template #tab>
      <div class="tab-placeholder">标签栏</div>
    </template>
    <template #sider>
      <div class="sider-placeholder">
        <div class="logo">侧边栏</div>
        <div>
          <h4>模式切换:</h4>
          <div v-for="item in modeList" :key="item">
            <span style="padding-right: 10px">{{ item }}</span>
            <input
              type="radio"
              name="mode"
              :value="item"
              :checked="item === mode"
              style="cursor: pointer"
              @change="setMode(item)"
            />
          </div>
        </div>
        <div>
          <span>固定头部和标签栏</span>
          <input
            type="checkbox"
            :checked="fixedHeaderAndTab"
            @change="setFixedHeaderAndTab"
          />
        </div>
        <div>
          <span>固定尾栏</span>
          <input
            type="checkbox"
            :checked="fixedFooter"
            @change="setFixedFooter"
          />
        </div>
        <div>
          <span>折叠侧边栏</span>
          <input
            type="checkbox"
            :checked="siderCollapse"
            @change="setSiderCollapse"
          />
        </div></div
    ></template>
    <template #footer>
      <div class="footer-placeholder">尾栏</div>
    </template>
    <OtherComponent />
    <div v-for="i in 100" :key="i" style="text-align: center">{{ i }}</div>

  </CzlLayout>
</template>
<script setup lang="ts">
import { ref } from "vue";
import {CzlLayout,OtherComponent} from "@my-admin/czl-layout";
// import type {LayoutProps} from '@my-admin/czl-layout'

// var theme:LayoutProps = {}

type Mode = "vertical" | "horizontal";
const mode = ref<Mode>("vertical");
const modeList: Mode[] = ["vertical", "horizontal"];
const fixedHeaderAndTab = ref(true);
const fixedFooter = ref(false);
const siderCollapse = ref(false);

function setMode(value: Mode) {
  mode.value = value;
}
function setFixedHeaderAndTab() {
  fixedHeaderAndTab.value = !fixedHeaderAndTab.value;
}
function setFixedFooter() {
  fixedFooter.value = !fixedFooter.value;
}
function setSiderCollapse() {
  siderCollapse.value = !siderCollapse.value;
}
</script>

<style>
body {
  margin: 0;
}
.header-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #e6e6e6;
}
.tab-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ccc;
}
.sider-placeholder {
  height: 100%;
  background-color: #d9d9d9;
  padding: 12px;
}
.sider-placeholder .logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #e6e6e6;
}
</style>

导出的ts类型

interface LayoutProps {
  /** 布局模式 */
  mode?: "vertical" | "horizontal";
  /** 最小宽度 */
  minWidth?: number;
  /** 头部可见 */
  headerVisible?: boolean;
  /** 头部高度 */
  headerHeight?: number;
  /** 标签可见 */
  tabVisible?: boolean;
  /** 标签页高度 */
  tabHeight?: number;
  /** 固定头部和标签 */
  fixedHeaderAndTab?: boolean;
  /** 给主体添加禁止溢出 */
  addMainOverflowHidden?: boolean;
  /** 底部可见 */
  footerVisible?: boolean;
  /** 底部高度 */
  footerHeight?: number;
  /** 固定底部 */
  fixedFooter?: boolean;
  /** 侧边可见 */
  siderVisible?: boolean;
  /** 侧边栏高度 */
  siderWidth?: number;
  /** 侧边栏折叠状态的高度 */
  siderCollapsedWidth?: number;
  /** 侧边栏折叠状态 */
  siderCollapse?: boolean;
  /** 右侧抽屉折叠状态 */
  drawerCollapse?: boolean;
  /** 动画过渡时间 */
  transitionDuration?: number;
  /** 动画过渡速度曲线 */
  transitionTimingFunction?: string;
}

引入导出的ts接口

import type {LayoutProps} from '@my-admin/czl-layout'

const theme:LayoutProps = {}

预览

http://121.43.150.140:8080/