<!
--
* @fenghua: 2401_87008233 3024798541@
qq.com
* @Date: 2025
-09
-11 13:15:42
* @LastEditors: 一只小风华 2468736096@
qq.com
* @LastEditTime: 2025
-09
-16 13:37:07
* @FilePath: \NanChange:\Vue
代码\Dao_Yun\src\App.vue
* @Description:
*
* Copyright (c) 2025 by ${fenghua}, All Rights Reserved.
-->
<script setup lang="ts">
import { RouterView } from 'vue
-router';
import './style/App.css'
import { ref, nextTick } from 'vue';
import { Search, Close } from '@element
-plus/icons
-vue';
import { useRoute } from 'vue
-router';
const isExpanded = ref(false);
const searchValue = ref('');
const searchInput = ref(null);
const route = useRoute()
// 展开搜索框
const expandSearch = () => {
isExpanded.value = true;
// 下一个tick确保DOM更新后聚焦
nextTick(() => {
if (searchInput.value) {
searchInput.value.focus();
}
});
};
// 收起搜索框
const collapseSearch = () => {
isExpanded.value = false;
searchValue.value = '';
};
// 执行搜索
const handleSearch = () => {
if (searchValue.value.trim()) {
console.log('搜索内容:', searchValue.value);
// 这里添加实际搜索逻辑
}
};
</script>
<template>
<div class="common
-layout">
<el
-container>
<el
-header v
-if="route?.meta?.showHeader" class="tou_bu">
<!
-- 左侧内容
-->
<div class="tou_bu_div">
<img src="/images/logo.svg" alt="" width="40px">
<p>道云后台管理系统</p>
</div>
<!
-- 右侧内容
-->
<div class="tou_bu_div_righ">
<div class="search
-container">
<!
-- 图标状态
-->
<el
-icon v
-if="!isExpanded" class="search
-icon" style="color: white;" @click="expandSearch">
<Search />
</el
-icon>
<!
-- 搜索框状态 (带过渡动画)
-->
<transition name="el
-zoom
-in
-center">
<div v
-if="isExpanded" class="search
-expanded">
<el
-input ref="searchInput" v
-model="searchValue" placeholder="请输入搜索内容" clearable
@keyup.enter="handleSearch">
<template #suffix>
<el
-icon class="close
-icon" @click="collapseSearch">
<Close />
</el
-icon>
</template>
</el
-input>
<el
-button type="primary" icon="Search" @click="handleSearch">搜索</el
-button>
</div>
</transition>
</div>
<div><el
-icon :size="22">
<Bell />
</el
-icon></div>
</div>
<!
-- 用户
-->
<div class="yong_hu">
<img src="/images/tou_xiang.jpg" alt="" width="26px" height="26px">
<p>一只小风华</p>
</div>
</el
-header>
<el
-container>
<el
-aside width="200px" v
-if="route?.meta?.showHeader">
<el
-menu default
-active="2" class="el
-menu
-vertical
-demo" router='true'>
<el
-menu
-item index="2" route="/zhu_ye">
<span><el
-icon>
<Compass />
</el
-icon> 主页</span>
</el
-menu
-item>
<el
-sub
-menu index="3">
<template #title>
<el
-icon>
<User />
</el
-icon>
<span>权限管理</span>
</template>
<el
-menu
-item
-group>
<el
-menu
-item index="3
-1" route="/quan_Xian">权限管理</el
-menu
-item>
<el
-menu
-item index="3
-2" route="/push">添加/编辑角色</el
-menu
-item>
</el
-menu
-item
-group>
</el
-sub
-menu>
<el
-sub
-menu index="4">
<template #title>
<el
-icon>
<Document />
</el
-icon>
<span>用户管理</span>
</template>
<el
-menu
-item
-group>
<el
-menu
-item index="4
-1" route="/yong_Hu">用户管理</el
-menu
-item>
<el
-menu
-item index="4
-2" route="/push_yonghu">添加/编辑用户</el
-menu
-item>
<el
-menu
-item index="4
-3" route="/chon_zhi">重置密码</el
-menu
-item>
</el
-menu
-item
-group>
</el
-sub
-menu>
<el
-sub
-menu index="5">
<template #title>
<el
-icon>
<Management />
</el
-icon>
<span>课程管理</span>
</template>
<el
-menu
-item
-group>
<el
-menu
-item index="5
-1" route="/ke_Cheng">课程管理</el
-menu
-item>
<el
-menu
-item index="5
-2" route="/push_kc">添加/编辑课程</el
-menu
-item>
<el
-menu
-item index="5
-3" route="/kc_xianxi">课程详细</el
-menu
-item>
</el
-menu
-item
-group>
</el
-sub
-menu>
<el
-sub
-menu index="6">
<template #title>
<el
-icon>
<Monitor />
</el
-icon>
<span>系统管理</span>
</template>
<el
-menu
-item
-group>
<el
-menu
-item index="6
-1" route="kao_Qin">关于考勤</el
-menu
-item>
<el
-menu
-item index="6
-2" route="shu_ju">数据字典</el
-menu
-item>
<el
-menu
-item index="6
-3" route="chuangjian">创建字典</el
-menu
-item>
</el
-menu
-item
-group>
</el
-sub
-menu>
<el
-sub
-menu index="7">
<template #title>
<el
-icon>
<Shop />
</el
-icon>
<span>学校管理</span>
</template>
<el
-menu
-item
-group>
<el
-menu
-item index="7
-1" route="school_kc">课程详情</el
-menu
-item>
<el
-menu
-item index="7
-2" route="school_push"> 添加高校</el
-menu
-item>
</el
-menu
-item
-group>
</el
-sub
-menu>
<el
-sub
-menu index="8">
<template #title>
<el
-icon>
<Location />
</el
-icon>
<span>考勤管理</span>
</template>
<el
-menu
-item
-group>
<el
-menu
-item index="8
-1" route="KaoQin_Guanli">考勤管理</el
-menu
-item>
<el
-menu
-item index="8
-2" route="qian_dao">创建/编辑签到</el
-menu
-item>
<el
-menu
-item index="8
-3" route="qd_xq">签到详情</el
-menu
-item>
</el
-menu
-item
-group>
</el
-sub
-menu>
</el
-menu>
</el
-aside>
<el
-main>
<RouterView />
</el
-main>
</el
-container>
</el
-container>
</div>
</template>
<style scoped></style>
改成头部和侧边栏不滚动只用内容部分滚动
如何获得QQ黄砖：步骤与代码详解,
该文详细介绍了如何获取QQ的黄砖特权，包括一系列的步骤，并提供了相关的代码实现，帮助用户理解并操作这一过程。
扫一扫
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
