0.1.1-beta.9 • Published 3 years ago
@yxyunti/yt-ui v0.1.1-beta.9
💪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
参数 | 说明 | 类型 | 可选 | 默认 |
---|---|---|---|---|
overViewUrl | 总览地址,可根据环境动态配置(必填) | String | — | — |
activeIndex | 当前选中菜单 id | String | — | — |
activeTenant | 当前选中租户 name | String | — | — |
Methods
方法名 | 说明 | 回调参数 |
---|---|---|
changeTenant | 切换租户 | 当前选中租户对象 |
logout | 注销登录 | — |
handleSelect | 用户选中菜单回调 | 当前选中菜单对象 |
onAllMenu | 初始化返回所有菜单数据 | 菜单对象 |
onAllTenant | 初始化返回所有租户列表 | 租户列表 |
YtSidebar 组件
<yt-sidebar :menu-list="" :default-index="" :title="" @handleSelect="" />
Attribute
参数 | 说明 | 类型 | 可选 | 默认 |
---|---|---|---|---|
menuList | 侧边栏菜单数据 | Array | — | — |
defaultIndex | 当前选中菜单索引 | String | — | — |
title | 侧边栏标题 | String | — | — |
Methods
方法名 | 说明 | 回调参数 |
---|---|---|
handleSelect | 用户选中菜单回调 | 当前选中菜单对象 |
💿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>
0.1.1-beta.2
3 years ago
0.1.1-beta.6
3 years ago
0.1.1-beta.5
3 years ago
0.1.1-beta.4
3 years ago
0.1.1-beta.3
3 years ago
0.1.1-beta.9
3 years ago
0.1.1-beta.8
3 years ago
0.1.1-beta.7
3 years ago
0.1.0-beta.3
3 years ago
0.1.1-beta.1
3 years ago
0.1.1-beta.0
3 years ago
0.1.0-beta.5
3 years ago
0.1.0-beta.4
3 years ago
0.1.0-beta.7
3 years ago
0.1.0-beta.6
3 years ago
0.1.0-beta.9
3 years ago
0.1.0-beta.8
3 years ago
0.1.0-beta.2
3 years ago
0.1.0-beta.1
3 years ago
0.1.0-beta.0
3 years ago
0.0.3
3 years ago
0.0.1
3 years ago
0.0.5-beta.1
3 years ago
0.0.5-beta.0
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.4-beta.0
3 years ago
0.0.3-beta.0
3 years ago
0.0.2
3 years ago
0.0.2-beta.0
3 years ago
0.0.1-beta1
3 years ago
0.0.1-beta.1
3 years ago
0.0.1-beta.0
3 years ago
0.0.1-beta
3 years ago