提交 e8d66d5d 编写于 作者: Shine-zwj's avatar Shine-zwj

add:新增首页视图左侧菜单布局组件

上级 24d1285a
...@@ -137,6 +137,8 @@ import AppPresetButton from './components/layout-element/interactive/app-preset- ...@@ -137,6 +137,8 @@ import AppPresetButton from './components/layout-element/interactive/app-preset-
import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue'; import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue';
import AppTodoList from './components/app-todo-list/app-todo-list.vue'; import AppTodoList from './components/app-todo-list/app-todo-list.vue';
import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue'; import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue';
// 布局组件
import AppIndexViewLayoutLeft from './components/view-layout/index-view-layout/index-view-layout-left/index-view-layout-left.vue';
// 全局挂载UI实体服务注册中心 // 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister; window['uiServiceRegister'] = uiServiceRegister;
...@@ -164,6 +166,7 @@ export const AppComponents = { ...@@ -164,6 +166,7 @@ export const AppComponents = {
v.prototype.$verify = Verify; v.prototype.$verify = Verify;
v.prototype.$viewTool = ViewTool; v.prototype.$viewTool = ViewTool;
v.prototype.$uiActionTool = UIActionTool; v.prototype.$uiActionTool = UIActionTool;
v.component('app-index-view-layout-left',AppIndexViewLayoutLeft);
v.component('app-department-personnel',AppDepartmentPersonnel); v.component('app-department-personnel',AppDepartmentPersonnel);
v.component('app-panel-button',AppPanelButton); v.component('app-panel-button',AppPanelButton);
v.component('app-panel-field',AppPanelField); v.component('app-panel-field',AppPanelField);
......
.index-view-layout-left {
.header-right {
display: flex;
align-items: center;
justify-content: space-between;
}
.index_sider {
background-color:#FFF;
}
}
\ No newline at end of file
<template>
<layout class="index_view index-view-layout-left" id="movebox">
<sider class="index_sider" :width="collapseChange ? 64 : 200" hide-trigger id="left_move">
<div class="sider-top">
<slot name="siderTop" />
</div>
<slot name="siderContent" />
</sider>
<div v-show="!collapseChange" id="move_axis"></div>
<layout id="right_move">
<header class="index_header">
<div class="header-left">
<slot name="headerLeft" />
</div>
<div class="header-center">
<slot name="headerCenter" />
</div>
<div class="header-right">
<slot name="headerRight" />
</div>
</header>
<content :class="{ 'index_content': true, 'index_tab_content': Object.is(navModel,'tab') ? true : false, 'index_route_content': Object.is(navModel,'route') ? true : false }">
<slot name="tabPageExp" />
<slot name="navPos" />
</content>
</layout>
</layout>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
@Component({})
export default class AppIndexViewLayoutLeft extends Vue {
/**
* 导航模式
*
* @memberof AppIndexViewLayoutLeft
*/
@Prop({ default: 'tab' })
public navModel!: string;
/**
* 是否折叠
*
* @memberof AppIndexViewLayoutLeft
*/
@Prop({ default: false })
public collapseChange!: boolean;
}
</script>
<style lang="less">
@import "./index-view-layout-left.less";
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册