东莞网站建设 手机壳,谷歌商店安卓版下载,企业官网网站,搜索热词排名文章目录 前言一、面包屑导航#xff08;Breadcrumb#xff09;1. 什么是面包屑导航#xff1f;2. 若依中的实现路由配置示例#xff1a;布局组件中的渲染#xff1a; 3. 自定义与扩展 二、顶部导航栏#xff08;Navbar#xff09;1. 什么是顶部导航栏#xff1f;2. 若… 文章目录 前言一、面包屑导航Breadcrumb1. 什么是面包屑导航2. 若依中的实现路由配置示例布局组件中的渲染 3. 自定义与扩展 二、顶部导航栏Navbar1. 什么是顶部导航栏2. 若依中的实现组件结构示例 3. 自定义与扩展 三、最佳实践1. 保持一致性2. 响应式设计3. 用户体验优化 四、示意图与源码五、总结 前言
在现代化的Web应用开发中用户体验和界面设计的合理性越来越受到重视。若依RuoYi框架作为一款基于Spring Boot和Vue.js的快速开发框架提供了丰富的UI组件和布局方案其中面包屑导航和顶部导航栏是提升用户体验的重要元素。本文将深入探讨若依框架中这两个组件的设计与实现。
一、面包屑导航Breadcrumb
1. 什么是面包屑导航
面包屑导航是一种显示用户在网站或应用中位置的导航工具通常以层级结构展示帮助用户理解当前页面在整个网站中的位置并提供快速返回上级页面的功能。
2. 若依中的实现
在若依框架中面包屑导航通常位于页面顶部紧接在顶部导航栏下方。它基于Element UI的el-breadcrumb组件实现通过解析路由配置动态生成。
路由配置示例
{path: /example,component: Example,meta: {title: 示例页面,breadcrumb: [{ path: /home, title: 首页 },{ path: /example, title: 示例页面 }]}
}布局组件中的渲染
templateel-breadcrumb separator/el-breadcrumb-item v-foritem in breadcrumbList :keyitem.path{{ item.title }}/el-breadcrumb-item/el-breadcrumb
/template3. 自定义与扩展
隐藏面包屑在路由配置中设置meta.breadcrumb: false。动态生成根据业务逻辑动态生成面包屑数据。样式调整通过CSS覆盖默认样式或使用Element UI的主题定制功能。
二、顶部导航栏Navbar
1. 什么是顶部导航栏
顶部导航栏是应用界面顶部的水平栏通常包含应用Logo、主要导航链接、用户信息和操作按钮等。它是用户访问应用功能的主要入口。
2. 若依中的实现
若依框架的顶部导航栏是一个独立的Vue组件Navbar.vue位于src/layout/components/目录下。它包含以下核心功能
系统Logo与名称展示应用的品牌标识。用户菜单提供个人中心、退出登录等操作。多标签页支持可选的TagsView组件方便用户切换已打开的页面。
组件结构示例
templatediv classnavbardiv classlogo全工序信息化系统/divdiv classright-menuel-dropdownspan classel-dropdown-linki classel-icon-user/i 用户名i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menuel-dropdown-item click.nativetoProfile个人中心/el-dropdown-itemel-dropdown-item click.nativelogout退出登录/el-dropdown-item/el-dropdown-menu/el-dropdown/div/div
/template3. 自定义与扩展
添加功能按钮在right-menu中添加搜索、通知等按钮。样式调整修改.navbar的CSS样式如高度、背景色、阴影等。响应式设计使用媒体查询适配不同屏幕尺寸。
三、最佳实践
1. 保持一致性
面包屑导航和顶部导航栏的设计应与整体应用风格保持一致。导航结构应清晰避免层级过深。
2. 响应式设计
确保导航栏在小屏幕设备上能够正常显示和操作。可以考虑在小屏幕上隐藏某些非核心功能。
3. 用户体验优化
面包屑导航应准确反映页面层级避免误导用户。顶部导航栏的用户菜单应包含常用操作减少用户操作步骤。
四、示意图与源码 layout-components文件夹下
1、Breadcrumb/index.vue
templateel-breadcrumb classapp-breadcrumb separator/transition-group namebreadcrumbel-breadcrumb-item v-for(item,index) in levelList :keyitem.pathspan v-ifitem.redirect noRedirect || index levelList.length - 1 classno-redirect{{ item.meta.title }}/spana v-else click.preventhandleLink(item){{ item.meta.title }}/a/el-breadcrumb-item/transition-group/el-breadcrumb
/templatescript setup
const route useRoute();
const router useRouter();
const levelList ref([])function getBreadcrumb() {// only show routes with meta.titlelet matched route.matched.filter(item item.meta item.meta.title);const first matched[0]// 判断是否为首页if (!isDashboard(first)) {matched [{ path: /index, meta: { title: 首页 } }].concat(matched)}levelList.value matched.filter(item item.meta item.meta.title item.meta.breadcrumb ! false)
}
function isDashboard(route) {const name route route.nameif (!name) {return false}return name.trim() Index
}
function handleLink(item) {const { redirect, path } itemif (redirect) {router.push(redirect)return}router.push(path)
}watchEffect(() {// if you go to the redirect page, do not update the breadcrumbsif (route.path.startsWith(/redirect/)) {return}getBreadcrumb()
})
getBreadcrumb();
/scriptstyle langscss scoped
.app-breadcrumb.el-breadcrumb {display: inline-block;font-size: 14px;line-height: 20px;margin-left: 8px;.no-redirect {color: #97a8be;cursor: text;}
}
/style2、navbar
templatediv classnavbarhamburger idhamburger-container :is-activeappStore.sidebar.opened classhamburger-container toggleClicktoggleSideBar /breadcrumb idbreadcrumb-container classbreadcrumb-container v-if!settingsStore.topNav /top-nav idtopmenu-container classtopmenu-container v-ifsettingsStore.topNav /div classright-menutemplate v-ifappStore.device ! mobileheader-search idheader-search classright-menu-item /!-- el-tooltip content源码地址 effectdark placementbottomruo-yi-git idruoyi-git classright-menu-item hover-effect //el-tooltipel-tooltip content文档地址 effectdark placementbottomruo-yi-doc idruoyi-doc classright-menu-item hover-effect //el-tooltip--screenfull idscreenfull classright-menu-item hover-effect /el-tooltip content布局大小 effectdark placementbottomsize-select idsize-select classright-menu-item hover-effect //el-tooltip/templatediv classavatar-containerel-dropdown commandhandleCommand classright-menu-item hover-effect triggerclickdiv classavatar-wrapperimg :srcuserStore.avatar classuser-avatar /el-iconcaret-bottom //el-icon/divtemplate #dropdownel-dropdown-menurouter-link to/user/profileel-dropdown-item个人中心/el-dropdown-item/router-linkel-dropdown-item commandsetLayout v-ifsettingsStore.showSettingsspan布局设置/span/el-dropdown-itemel-dropdown-item divided commandlogoutspan退出登录/span/el-dropdown-item/el-dropdown-menu/template/el-dropdown/div/div/div
/templatescript setup
import { ElMessageBox } from element-plus
import Breadcrumb from /components/Breadcrumb
import TopNav from /components/TopNav
import Hamburger from /components/Hamburger
import Screenfull from /components/Screenfull
import SizeSelect from /components/SizeSelect
import HeaderSearch from /components/HeaderSearch
import RuoYiGit from /components/RuoYi/Git
import RuoYiDoc from /components/RuoYi/Doc
import useAppStore from /store/modules/app
import useUserStore from /store/modules/user
import useSettingsStore from /store/modules/settingsconst appStore useAppStore()
const userStore useUserStore()
const settingsStore useSettingsStore()function toggleSideBar() {appStore.toggleSideBar()
}function handleCommand(command) {switch (command) {case setLayout:setLayout();break;case logout:logout();break;default:break;}
}function logout() {ElMessageBox.confirm(确定注销并退出系统吗, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {userStore.logOut().then(() {location.href /index;})}).catch(() { });
}const emits defineEmits([setLayout])
function setLayout() {emits(setLayout);
}
/scriptstyle langscss scoped
.navbar {height: 40px;top:60px;overflow: hidden;position: relative;//background: #fff;background-color: transparent;z-index:1;//background-image: url(/assets/images/title.png);.hamburger-container {line-height: 46px;height: 100%;float: left;cursor: pointer;transition: background 0.3s;-webkit-tap-highlight-color: transparent;:hover {background: rgba(0, 0, 0, 0.025);}}.breadcrumb-container {float: left;}.topmenu-container {position: absolute;left: 50px;}.errLog-container {display: inline-block;vertical-align: top;}.right-menu {float: right;height: 100%;line-height: 50px;display: flex;:focus {outline: none;}.right-menu-item {display: inline-block;padding: 0 8px;height: 100%;font-size: 18px;color: #5a5e66;vertical-align: text-bottom;.hover-effect {cursor: pointer;transition: background 0.3s;:hover {background: rgba(0, 0, 0, 0.025);}}}.avatar-container {margin-right: 40px;.avatar-wrapper {margin-top: 5px;position: relative;.user-avatar {cursor: pointer;width: 40px;height: 40px;border-radius: 10px;}i {cursor: pointer;position: absolute;right: -20px;top: 25px;font-size: 12px;}}}}
}
/style
五、总结
若依框架通过面包屑导航和顶部导航栏提供了良好的用户体验基础。开发者可以根据具体业务需求灵活调整这些组件的样式和功能打造符合应用场景的界面。无论是简单的后台管理系统还是复杂的企业级应用合理利用这些导航组件都能显著提升用户的操作效率和满意度。
希望本文能帮助你更好地理解和使用若依框架中的导航组件为你的项目增添光彩
