@yxyunti/yt-ui

💪yt-ui

yunti-ui is component library based on elementui design.

📦Build and install

npm i @yxyunti/yt-ui

🤔Usage in global

import YuntiUI from "@yxyunti/yt-ui";
import "@yxyunti/yt-ui/lib/main.css";
Vue.use(YuntiUI);

✨Components

YtHeader 组件

<yt-header
  :over-view-url=""
  :active-index=""
  :active-tenant=""
  @changeTenant=""
  @handleSelect=""
  @logout=""
  @onAllMenu=""
  @onAllTenant=""
/>

Attribute

Methods

YtSidebar 组件

<yt-sidebar :menu-list="" :default-index="" :title="" @handleSelect="" />

Attribute

Methods

💿Example

Recommended layout template and 🎯Demo.

参考代码:

<template>
  <div class="app-wrapper">
    <div class="header">
      <yt-header
        :over-view-url="overViewUrl"
        :active-index="activeIndex"
        :active-tenant="activeTenant"
        @changeTenant="changeTenant"
        @handleSelect="handleHeaderSelect"
        @logout="logout"
        @onAllMenu="onAllMenu"
        @onAllTenant="onAllTenant"
      />
    </div>
    <div class="main-wrapper">
      <div class="sidebar-container">
        <yt-sidebar
          :menu-list="menuList"
          :default-index="defaultIndex"
          :title="sidebarTitle"
          @handleSelect="handleSelectSidebar"
        />
      </div>
      <div class="main-container">
        <div>Main</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        overViewUrl: "http://www.example.com",
        activeIndex: "",
        defaultIndex: "",
        menuList: [],
        sidebarTitle: "",
        activeTenant: "",
      };
    },
    methods: {
      /**
       * 功能: 通过返回的租户列表,可以设置默认租户activeTenant及其他操作
       */
      onAllTenant(data) {
        console.log("租户列表", data);
      },
      /**
       * 功能:返回当前选中租户信息,供用户自定义操作
       */
      changeTenant(data) {
        console.log("选中的租户", data);
      },
      /**
       * 功能:退出登录.交由用户自定义操作(删除相关状态:token/cookie)
       */
      logout() {
        console.log("logout");
      },
      /**
       * 功能: 返回所有菜单数据,用户可设置默认选中头部索引activeIndex及其他操作
       */
      onAllMenu(data) {
        console.log("返回所有菜单数据", data);
      },
      /**
       * 功能:返回当前选中头部菜单数据,用户可获取并设置侧边栏数据menuList及默认选中侧边栏索引defaultIndex及其他操作
       */
      handleHeaderSelect(data) {
        console.log("返回当前选中头部菜单数据", data);
      },
      /**
       * 功能:返回当前选中侧边栏数据,供用户自定义操作
       */
      handleSelectSidebar(data) {
        console.log("返回当前选中侧边栏菜单数据", data);
      },
    },
  };
</script>

<style scoped>
  .app-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .main-wrapper {
    display: flex;
    width: 100%;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow-y: hidden;
  }

  .main-container {
    flex: 1;
    height: 100%;
    overflow: auto;
  }
</style>