Compare commits
2 Commits
92cf909ee6
...
b0bf10e7c3
Author | SHA1 | Date | |
---|---|---|---|
b0bf10e7c3 | |||
cf7762c281 |
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2023-06-20 14:29:45
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2024-01-26 23:04:29
|
||||
-->
|
||||
<template>
|
||||
<div class="layout-hamburger" @click="handleCollapse">
|
||||
<el-icon v-if="isCollapse" class="icon"><expand /></el-icon>
|
||||
|
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2024-01-27 16:02:43
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2024-04-12 21:12:01
|
||||
-->
|
||||
<template>
|
||||
<el-icon v-if="icon.includes('icon')" :class="`iconfont ${icon}`" :size="size" />
|
||||
<el-icon v-else :size="size"> <component :is="icon" /></el-icon>
|
||||
|
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2023-06-20 14:29:45
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2024-01-27 09:29:36
|
||||
-->
|
||||
<template>
|
||||
<component :is="type" v-bind="linkProps(to)">
|
||||
<slot />
|
||||
|
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2023-06-20 14:29:45
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2024-01-27 16:07:37
|
||||
-->
|
||||
<template>
|
||||
<template v-if="!item.hidden">
|
||||
<template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
|
||||
@ -15,21 +8,41 @@
|
||||
</el-menu-item>
|
||||
</layout-link>
|
||||
</template>
|
||||
<template v-else-if="level === 2 && !isCollapse">
|
||||
<el-dropdown trigger="hover" placement="right-start" :show-timeout="100" @visible-change="(val) => (isDropdownOpen = val)">
|
||||
<span class="el-dropdown-link el-menu-item" @mouseenter.prevent>
|
||||
<layout-icon :size="20" :icon="item.meta?.icon" />
|
||||
<span>{{ item.meta?.title + '1' }}</span>
|
||||
<el-icon class="arrow-icon" v-if="item.children?.length">
|
||||
<component :is="isDropdownOpen ? 'arrow-left' : 'arrow-right'" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-menu class="third-level-menu el-menu--vertical el-menu--popup-container" :default-active="$route.path" @select="$router.push">
|
||||
<el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
|
||||
<layout-icon :size="20" :icon="child.meta?.icon" />
|
||||
<span>{{ child.meta?.title }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<el-sub-menu v-else :index="item.path" teleported>
|
||||
<template #title>
|
||||
<layout-icon :size="20" :icon="item?.meta?.icon" />
|
||||
<span>{{ item.meta && item.meta?.title }}</span>
|
||||
</template>
|
||||
<sub-item v-for="child in item.children" :key="child.path" :item="child" />
|
||||
<sub-item v-for="child in item.children" :key="child.path" :item="child" :level="level + 1" />
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup name="sub-item">
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
// import { isExternal } from '@/utils/validate.js';
|
||||
import LayoutLink from './Link';
|
||||
import LayoutIcon from './Icon';
|
||||
import { useSettingStore } from '@/store/modules/setting';
|
||||
// import path from 'path-browserify';
|
||||
|
||||
defineProps({
|
||||
@ -37,6 +50,10 @@ defineProps({
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
level: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: '',
|
||||
@ -44,6 +61,10 @@ defineProps({
|
||||
});
|
||||
|
||||
const onlyOneChild = ref(null);
|
||||
const SettingStore = useSettingStore();
|
||||
const isDropdownOpen = ref(false);
|
||||
|
||||
const isCollapse = computed(() => !SettingStore.isCollapse);
|
||||
const hasOneShowingChild = (children = [], parent) => {
|
||||
const showingChildren = children.filter((item) => {
|
||||
// 过滤掉需要隐藏的菜单
|
||||
@ -79,3 +100,25 @@ const hasOneShowingChild = (children = [], parent) => {
|
||||
// return path.resolve(props.basePath, routePath);
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.third-level-menu {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
min-width: 180px;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
margin-left: auto;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2024-01-27 20:01:45
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2024-03-30 14:32:07
|
||||
-->
|
||||
<template>
|
||||
<div class="layout-sider" :class="{ 'has-logo': themeConfig.showLogo }">
|
||||
<Logo v-if="themeConfig.showLogo" :is-collapse="isCollapse" />
|
||||
@ -19,7 +12,7 @@
|
||||
:collapse-transition="false"
|
||||
:collapse="isCollapse"
|
||||
>
|
||||
<SubItem v-for="item in permissionRoutes" :key="item.path" :item="item" />
|
||||
<SubItem v-for="item in permissionRoutes" :key="item.path" :item="item" :level="1" />
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
* @Description: layout
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2024-01-26 20:13:37
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2024-02-05 16:03:31
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
class="basic-layout"
|
||||
|
@ -4,7 +4,6 @@
|
||||
ref="crudRef"
|
||||
v-model:search="searchCondition"
|
||||
v-model:page="pageData"
|
||||
:table-loading="_loading"
|
||||
:option="option"
|
||||
:data="data"
|
||||
@search-change="
|
||||
|
Loading…
x
Reference in New Issue
Block a user