MainLayout
.vue <template>
<el-container class="layout-container">
<el-aside width="200px">
<Sidebar />
</el-aside>
<el-main>
<TagsView />
<router-view />
</el-main>
</el-container>
</template>
<script lang = "ts" setup name = "layout">
import Sidebar from '@/components/Sidebar
.vue';
import TagsView from '@/components/Tags
.vue';
</script>
<
style scoped>
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.right-section {
display: flex;
align-items: center;
}
.layout-container {
display: flex;
height: 100vh;
}
.el-aside {
background: #04152e;
height: 100vh;
position: sticky;
top: 0;
}
</
style>
Sidebar
.vue <template>
<div class="sidebar">
<div class="sidebar-logo flex-center">
<img src="@/assets/cat-home
.jpeg" alt="Logo" class="logo-img" />
<span class="logo-text">Digital Twin</span>
</div>
<el-menu
active-text-color="#fff"
background-color="#001529"
:default-active="$route
.path"
text-color="#999"
:unique-opened="true"
router>
<SideBarItem :routerList="routerList" />
</el-menu>
</div>
</template>
<script lang="ts" setup>
import SideBarItem from '
./SidebarItem
.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const routerList = router
.getRoutes()
.filter((v) => v
.meta && v
.meta.isShow);
</script>
<
style lang="scss" scoped>
.sidebar {
height: 100%;
.sidebar-logo {
height: 48px;
background-color: #002140;
color: #fff;
font-weight: 700;
line-height: 48px;
text-align: center;
font-size: 20px;
display: flex;
align-items: center;
padding: 0 16px;
box-sizing: border-box;
.logo-img {
height: 15px;
width: 30px;
margin-right: 10px;
}
.logo-text {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
font-weight: bold;
color: #ffffff;
}
}
.el-menu {
width: 100%;
height: calc(100% - 48px);
border-right: 0;
overflow: auto;
}
}
</
style>
SidebarItem
.vue <template>
<template v-for="item in routerList" :key="item
.path">
<!-- 有子菜单：el-sub-menu -->
<el-sub-menu :index="item
.path" v-if="item
.children && item
.children
.length > 0">
<template #
title>
<!-- 判断是否为 Iconify 格式的图标（包含冒号） -->
<Icon
v-if="item
.meta.icon && typeof item
.meta.icon === 'string' && item
.meta.icon
.includes(':')"
:icon="item
.meta.icon"
width="18"
height="18"
style="margin-right: 6px; vertical-align: middle;"
/>
<!-- 否则当作 Vue 组件处理（如 Document, Setting 等） -->
<el-icon
v-else-if="item
.meta.icon"
:size="16"
color="#409eff"
style="margin-right: 6px; vertical-align: middle;"
>
<component :is="getIconComponent(item
.meta.icon as string)" />
</el-icon>
<span class="menu-
title">{{ item
.meta.title }}</span>
</template>
<!-- 递归子菜单 -->
<sidebar-item :routerList="item
.children as CustomRouteRecordRaw[]" />
</el-sub-menu>
<!-- 叶子节点:el-menu-item -->
<el-menu-item :index="item
.path" v-else>
<!-- 同样逻辑判断图标类型 -->
<Icon
v-if="item
.meta.icon && typeof item
.meta.icon === 'string' && item
.meta.icon
.includes(':')"
:icon="item
.meta.icon"
width="18"
height="18"
style="margin-right: 6px; vertical-align: middle;"
/>
<el-icon
v-else-if="item
.meta.icon"
:size="16"
color="#409eff"
style="margin-right: 6px; vertical-align: middle;"
>
<component :is="getIconComponent(item
.meta.icon as string)" />
</el-icon>
<span>{{ item
.meta.title }}</span>
</el-menu-item>
</template>
</template>
<script setup lang="ts">
import * as ElementPlusIcons from '@element-plus/icons-vue'
import type { RouteRecordRaw } from 'vue-router'
type CustomRouteRecordRaw = RouteRecordRaw & {
meta: {
isShow?: boolean;
};
};
const props = defineProps({
routerList: {
type: Array as () => CustomRouteRecordRaw[],
required: true
}
});
const getIconComponent = (iconName: string) => {
return (ElementPlusIcons as Record<string, any>)[iconName] || null
}
</script>
<
style scoped lang="scss">
.is-active {
background: #1f4a5e;
font-weight: 700;
}
.menu-
title {
font-size: 16px; // 调整字体大小
font-weight: 700; // 可选：调整字体粗细
}
.el-menu-item {
font-size: 16px;
&:hover {
color: #fff;
font-weight: 700;
}
}
.el-menu--collapse {
.el-menu-item {
justify-content: center;
}
}
</
style>
tages.vue <template>
<div class="layout-
header">
<div class="nav-collapse">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in matchedRoutes" :key="index">
{{ item
.meta?
.title }}
</el-breadcrumb-item>
</el-breadcrumb>
<div class="user-dropdown-wrapper">
<UserDropdown />
</div>
</div>
<div class="tags-view-container">
<div class="tags-view-wrapper">
<router-link
v-for="tag in visitedViews"
:key="tag
.path"
:to="{ path: tag
.path }"
class="tags-view-item"
:class="isActive(tag) ? 'active' : ''"
>
{{ tag
.meta?
.title }}
<el-icon @click
.prevent
.stop="closeSelectedTag(tag)">
<Close />
</el-icon>
</router-link>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useTagsViewStore } from '@/stores/tagsView'
import type { RouteLocationNormalized } from 'vue-router'
import UserDropdown from '@/components/UserDropdown
.vue'
const route = useRoute()
const tagsViewStore = useTagsViewStore()
const visitedViews = computed(() => tagsViewStore
.visitedViews)
const matchedRoutes = computed(() => route
.matched
.filter(item => item
.meta?
.title))
const isActive = (tag: RouteLocationNormalized) => tag
.path === route
.path
const closeSelectedTag = (tag: RouteLocationNormalized) => {
tagsViewStore
.delView(tag)
}
</script>
<
style scoped>
.layout-
header {
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0
.1);
margin-top: -20px;
margin-left: 0px;
position: relative;
}
.nav-collapse {
display: flex;
align-items: center;
padding: 0 15px;
height: 50px;
margin-left: 5px;
width: 100%;
}
.user-dropdown-wrapper {
margin-left: auto;
}
.nav-collapse
.el-icon {
margin-right: 15px;
font-size: 20px;
cursor: pointer;
}
.tags-view-container {
height: 34px;
background: #ffffff;
padding-left: 15px;
margin-top: 0px;
border-bottom: 1px solid #e6e6e6;
}
.tags-view-wrapper {
display: flex;
justify-content: flex-start;
padding-left: 5px;
gap: 1px;
}
.tags-view-item {
display: inline-flex;
align-items: center;
padding: 0 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 12px;
line-height: 28px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0
.1);
transition: all 0
.3s;
}
.tags-view-item:hover {
border-color: #ffffff;
}
.tags-view-item
.active {
background-color: #5a9481;
color: #fff;
border-color: #f3f5f4;
}
.tags-view-item
.el-icon {
margin-left: 5px;
cursor: pointer;
}
</
style>
现在需要左侧导航栏点击后能向左侧折叠，并鼠标放在上面有提示
动态添加网页元素
本文介绍如何使用C#动态地为网页添加元数据标签、样式表、内联样式及标题等元素，通过具体代码示例展示了如何操作ASP.NET页面的Header部分。
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
