提交 dc4b7de2 编写于 作者: RedPig97's avatar RedPig97

update: 中间菜单适配栅格布局

上级 6a81697e
layoutPos: {
layout: '{{item.layout}}',
{{#if (eq item.layout 'TABLE_24COL')}}
{{#if item.colLG}}lg:"{{#if (neq item.colLG -1)}}{{item.colLG}}{{else}}24{{/if}}", lgOffset: "{{#if (neq item.colLGOffset -1)}}{{item.colLGOffset}}{{else}}0{{/if}}",{{/if}}
{{#if item.colMD}}md:"{{#if (neq item.colMD -1)}}{{item.colMD}}{{else}}24{{/if}}", mdOffset: "{{#if (neq item.colMDOffset -1)}}{{item.colMDOffset}}{{else}}0{{/if}}",{{/if}}
{{#if item.colSM}}sm:"{{#if (neq item.colSM -1)}}{{item.colSM}}{{else}}24{{/if}}", smOffset: "{{#if (neq item.colSMOffset -1)}}{{item.colSMOffset}}{{else}}0{{/if}}",{{/if}}
{{#if item.colXS}}xs:"{{#if (neq item.colXS -1)}}{{item.colXS}}{{else}}24{{/if}}", xsOffset: "{{#if (neq item.colXSOffset -1)}}{{item.colXSOffset}}{{else}}0{{/if}}",{{/if}}
{{else}}
{{#if item.colLG}}lg:"{{#if (neq item.colLG -1)}}{{item.colLG}}*2{{else}}24{{/if}}", lgOffset: "{{#if (neq item.colLGOffset -1)}}{{item.colLGOffset}}*2{{else}}0{{/if}}",{{/if}}
{{#if item.colMD}}md:"{{#if (neq item.colMD -1)}}{{item.colMD}}*2{{else}}24{{/if}}", mdOffset: "{{#if (neq item.colMDOffset -1)}}{{item.colMDOffset}}*2{{else}}0{{/if}}",{{/if}}
{{#if item.colSM}}sm:"{{#if (neq item.colSM -1)}}{{item.colSM}}*2{{else}}24{{/if}}", smOffset: "{{#if (neq item.colSMOffset -1)}}{{item.colSMOffset}}*2{{else}}0{{/if}}",{{/if}}
{{#if item.colXS}}xs:"{{#if (neq item.colXS -1)}}{{item.colXS}}*2{{else}}24{{/if}}", xsOffset: "{{#if (neq item.colXSOffset -1)}}{{item.colXSOffset}}*2{{else}}0{{/if}}",{{/if}}
{{/if}}
},
......@@ -29,7 +29,8 @@
{{#if item.psNavigateContexts}}
navContext: {{item.psNavigateContexts}},
{{/if}}
{{#if item.getPSLayoutPos}}
{{#if item.psLayoutPos}}
{{> @macro/front-end/widgets/common/layout-pos-model.hbs item=item.psLayoutPos}}
{{/if}}
{{#if item.psAppMenuItems}}
items: [
......
......@@ -3,41 +3,55 @@ import { IActionParam, IParam } from '@core';
interface MenuCenterProps {
menus: IParam[];
}
const props = withDefaults(defineProps<MenuCenterProps>(), {
});
const props = withDefaults(defineProps<MenuCenterProps>(), {});
interface menuCenterEmit {
(name: "onMenuSelect", value: IParam): void;
(name: 'onMenuSelect', value: IParam): void;
}
const emit = defineEmits<menuCenterEmit>();
const onClick = (item: IParam) => {
emit("onMenuSelect", {
emit('onMenuSelect', {
key: item.name,
item: item,
});
}
};
console.log(props.menus);
</script>
<template>
<a-card
v-for="(menu, index) in menus"
v-show="!menu.hidden"
:key="index"
:class="['app-menu__card', menu.itemSysCss]"
:bordered="false"
:title="menu.caption"
>
<a-space :size="24">
v-for="(menu, index) in menus"
v-show="!menu.hidden"
:key="index"
:class="['app-menu__card', menu.itemSysCss]"
:bordered="false"
:title="menu.caption"
>
<template v-if="Object.is(menu.layoutPos.layout, 'FLEX')">
<a-space :size="24" class="app-menu__card--flex">
<template v-for="item in menu.items">
<a-button
v-if="!item.hidden"
size="large"
:class="['app-menu-item', item.itemSysCss]"
@click="onClick(item)"
>
<a-button v-if="!item.hidden" size="large" :class="['app-menu-item', item.itemSysCss]" @click="onClick(item)">
\{{ item.caption }}
</a-button>
</template>
</a-space>
</a-card>
</template>
\ No newline at end of file
</template>
<template v-else>
<a-row :wrap="true" class="app-menu__card--grid" :gutter="20" style="row-gap: 20px;">
<a-col
v-for="item in menu.items"
:lg="{span: item.layoutPos.lg, offset: item.layoutPos.lgOffset }"
:md="{span: item.layoutPos.md, offset: item.layoutPos.mdOffset }"
:sm="{span: item.layoutPos.sm, offset: item.layoutPos.smOffset }"
:xs="{span: item.layoutPos.xs, offset: item.layoutPos.xsOffset }"
v-show="!item.hidden"
:class="['app-menu-item', item.itemSysCss]"
@click="onClick(item)"
>
<a-button size="large">
\{{ item.caption }}
</a-button>
</a-col>
</a-row>
</template>
</a-card>
</template>
.app-menu__card {
.app-menu__card--flex {
flex-wrap: wrap;
.ant-btn {
width: 320px;
height: 56px;
border-radius: 4px;
border-left: 10px solid var(--app-color-primary);
&:hover {
border-color: transparent;
border-left-color: var(--app-color-primary);
box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
}
}
}
.app-menu__card--grid {
row-gap: 20px;
.ant-btn {
width: 100%;
min-width: 320px;
height: 56px;
border-radius: 4px;
border-left: 10px solid var(--app-color-primary);
&:hover {
border-color: transparent;
border-left-color: var(--app-color-primary);
box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
}
}
}
}
\ No newline at end of file
@use './icon-text.scss';
@use './app-quick-group.scss';
\ No newline at end of file
@use './app-quick-group.scss';
@use './app-menu-center.scss';
\ No newline at end of file
......@@ -5,19 +5,5 @@
}
.ant-card-body {
text-align: left;
.ant-space {
flex-wrap: wrap;
.ant-btn {
width: 320px;
height: 56px;
border-radius: 4px;
border-left: 10px solid var(--app-color-primary);
&:hover {
border-color: transparent;
border-left-color: var(--app-color-primary);
box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
}
}
}
}
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册