rj-vue3-antd-components

layout使用

menuList 菜单数组

<template>
  <rj-layout class="app" :menu="menuList">
    <template #headerLogo>
      <div class="rj-layout-logo"></div>
    </template>
    <template #headerLeftBox>
      <div class="rj-layout-title">
        <div class="headerTitle">测试标题</div>
      </div>
    </template>
    <template #headerRightBox>
      <div class="rj-layout-right">
        <Space :size="20">
          <span>张三</span>
          <span>张三</span>
          <span>张三</span>
        </Space>
      </div>
    </template>
    <template #breadcrumb>
      <Breadcrumb style="margin: 16px 0">
        <Item>Home</Item>
      </Breadcrumb>
    </template>
    <router-view />
  </rj-layout>
</template>
<script>
import { defineComponent } from "vue";
import RJLayout from "rj-vue3-antd-components";
import { Space, Breadcrumb } from "ant-design-vue";
const { item } = Breadcrumb;
export default defineComponent({
  name: "App",
  components: { "rj-layout": RJLayout, Space, Breadcrumb, item },
  setup() {
    console.log("setup----App");
    const menuList = [
      {
        path: "/home",
        name: "Home",
        meta: { icon: "iconfont icon-ptmdaohang1", title: "首页" },
      },
      {
        path: "/test",
        name: "Test",
        meta: { icon: "iconfont icon-ptmdaohang1", title: "测试" },
        children: [
          {
            path: "/test/testOne",
            name: "TestOne",
            meta: { icon: "", title: "测试 1" },
          },
          {
            path: "/test/testTwo",
            name: "TestTwo",
            meta: { icon: "", title: "测试 2" },
          },
        ],
      },
    ];
    return { menuList };
  },
});
</script>
<style lang="less">
@import "./assets/iconFont/iconfont.css";
#app {
  height: 100%;
  .app {
    .rj-layout-logo {
      position: absolute;
      height: 60px;
      width: 230px;
      top: 0;
      left: 0;
      background-image: url(./assets/logo.png);
      background-repeat: no-repeat;
      background-size: auto 45%;
      background-position: 50%;
    }
    .rj-layout-logo::after {
      content: " ";
      position: absolute;
      height: 30%;
      width: 1px;
      background-color: #dcdfe6;
      right: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    .rj-layout-title {
      left: 230px;
      position: absolute;
      height: 60px;
      top: 0;
      .headerTitle {
        line-height: 60px;
        padding-left: 20px;
        font-weight: 700;
      }
    }
    .rj-layout-right {
      position: absolute;
      height: 60px;
      top: 0;
      right: 24px;
    }
  }
}
</style>