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

update:更新

上级 33358c3e
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
{{/if}} {{/if}}
{{#if item.psSysImage}} {{#if item.psSysImage}}
{{#if item.psSysImage.cssClass}} {{#if item.psSysImage.cssClass}}
iconCls: "{{item.psSysImage.cssClass}}", iconClass: "{{item.psSysImage.cssClass}}",
{{/if}} {{/if}}
{{#if item.psSysImage.imagePath}} {{#if item.psSysImage.imagePath}}
imgPath: "{{item.psSysImage.imagePath}}", imgPath: "{{item.psSysImage.imagePath}}",
......
<script setup lang="ts"> <script setup lang="ts">
// props声明和默认值处理
interface Props { interface Props {
text?: string text?: string
iconClass?: string, iconClass?: string,
...@@ -15,7 +13,6 @@ const props = withDefaults(defineProps<Props>(), { ...@@ -15,7 +13,6 @@ const props = withDefaults(defineProps<Props>(), {
const hasIcon = computed(() => props.iconClass || props.imgPath) const hasIcon = computed(() => props.iconClass || props.imgPath)
const extraClass = { const extraClass = {
"ibiz-icon-text--no-icon": !hasIcon.value, "ibiz-icon-text--no-icon": !hasIcon.value,
[`ibiz-icon-text--${props.position}`]: hasIcon.value, [`ibiz-icon-text--${props.position}`]: hasIcon.value,
......
<script setup lang="ts"> <script setup lang="ts">
import { IParam } from "@ibiz-core"; import { IParam } from "@ibiz-core";
import {
UserOutlined,
} from '@ant-design/icons-vue';
interface Props{ interface Props{
items: IParam[]; items: IParam[],
collapsed: boolean,
} }
const props = withDefaults(defineProps<Props>(), {}); const props = withDefaults(defineProps<Props>(), {
collapsed: false,
});
</script> </script>
<template> <template>
<template v-for="item in items" :key="item.name"> <template v-for="item in items" :key="item.name">
<template v-if="!item.items"> <template v-if="!item.items">
<a-menu-item v-if="!item.hidden" :key="item.name"> <a-menu-item v-if="!item.hidden" :key="item.name" class="ibiz-menu-item">
<template #icon> <template #icon>
<div class="menu-icon"> <IbizIconText :iconClass="item.iconClass" :imgPath="item.imgPath" :text="collapsed && item.caption[0]"/>
<UserOutlined />
</div>
</template> </template>
\{{item.caption}} \{{item.caption}}
</a-menu-item> </a-menu-item>
</template> </template>
<template v-else> <template v-else>
<a-sub-menu v-if="!item.hidden" :key="item.name"> <a-sub-menu v-if="!item.hidden" :key="item.name" class="ibiz-menu-item">
<template #icon> <template #icon>
<div class="menu-icon"> <IbizIconText :iconClass="item.iconClass" :imgPath="item.imgPath" :text="collapsed && item.caption[0]"/>
<UserOutlined />
</div>
</template> </template>
<template #title>\{{item.caption}}</template> <template #title>\{{item.caption}}</template>
<IbizMenuItem :items="item.items" /> <IbizMenuItem :items="item.items" />
...@@ -36,5 +32,26 @@ const props = withDefaults(defineProps<Props>(), {}); ...@@ -36,5 +32,26 @@ const props = withDefaults(defineProps<Props>(), {});
</template> </template>
<style lang="scss"> <style lang="scss">
.ibiz-icon-text {
display: flex !important;
align-items: center;
}
.ant-menu-submenu-popup {
.ibiz-menu-item {
display: flex !important;
}
.ant-menu-submenu-title {
display: flex !important;
width: 100%;
}
}
.ant-menu-inline-collapsed {
.ibiz-menu-item {
position: relative;
.ibiz-icon-text {
position: absolute;
right: calc(50% - 8px);
}
}
}
</style> </style>
\ No newline at end of file
...@@ -32,6 +32,9 @@ const emit = defineEmits<ViewEmit>(); ...@@ -32,6 +32,9 @@ const emit = defineEmits<ViewEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state } = new IndexView(ViewConfig).moduleInstall(props, emit); const { state } = new IndexView(ViewConfig).moduleInstall(props, emit);
const collapsed: Ref<boolean> = ref(false); const collapsed: Ref<boolean> = ref(false);
const collapsedChange = () => {
collapsed.value = !collapsed.value;
}
</script> </script>
<template> <template>
...@@ -42,9 +45,9 @@ const collapsed: Ref<boolean> = ref(false); ...@@ -42,9 +45,9 @@ const collapsed: Ref<boolean> = ref(false);
<MenuUnfoldOutlined <MenuUnfoldOutlined
v-if="collapsed" v-if="collapsed"
class="trigger" class="trigger"
@click="() => (collapsed = !collapsed)" @click="collapsedChange"
/> />
<MenuFoldOutlined v-else class="trigger" @click="() => (collapsed = !collapsed)" /> <MenuFoldOutlined v-else class="trigger" @click="collapsedChange" />
</div> </div>
</template> </template>
<template #user> <template #user>
......
...@@ -32,7 +32,7 @@ const routes = [ ...@@ -32,7 +32,7 @@ const routes = [
viewType: "{{appView.viewType}}", viewType: "{{appView.viewType}}",
{{#if appView.psSysImage}} {{#if appView.psSysImage}}
imgPath: "{{appView.psSysImage.imagePath}}", imgPath: "{{appView.psSysImage.imagePath}}",
iconCls: "{{appView.psSysImage.cssClass}}", iconClass: "{{appView.psSysImage.cssClass}}",
{{/if}} {{/if}}
parameters: [ parameters: [
{ pathName: "apps", parameterName: "app" }, { pathName: "apps", parameterName: "app" },
......
...@@ -25,11 +25,12 @@ const { state, menuSelect } = new MenuControl(CtrlConfig).moduleInstall(props, e ...@@ -25,11 +25,12 @@ const { state, menuSelect } = new MenuControl(CtrlConfig).moduleInstall(props, e
<template> <template>
<a-menu <a-menu
class="ibiz-menu"
v-model:openKeys="state.defaultOpens" v-model:openKeys="state.defaultOpens"
v-model:selectedKeys="state.defaultSelect" v-model:selectedKeys="state.defaultSelect"
:mode="Object.is('LEFT', state.menuAlign) ? 'inline' : 'horizontal'" :mode="Object.is('LEFT', state.menuAlign) ? 'inline' : 'horizontal'"
@select="menuSelect"> @select="menuSelect">
<IbizMenuItem :items="state.menus" /> <IbizMenuItem :items="state.menus" :collapsed="collapsed"/>
</a-menu> </a-menu>
</template> </template>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册