网站建设备案不通过,一个公司为什么要做网站,网站建设装什么系统,磁力下载文章目录 vue后台管理系统从0到1#xff08;5#xff09;完善侧边栏修改bug渲染header导航栏 vue后台管理系统从0到1#xff08;5#xff09; 接上一期#xff0c;我们需要完善我们的侧边狼
完善侧边栏
我们在 element 组件中可以看见#xff0c;这一个侧边栏是符合我们… 文章目录 vue后台管理系统从0到15完善侧边栏修改bug渲染header导航栏 vue后台管理系统从0到15 接上一期我们需要完善我们的侧边狼
完善侧边栏
我们在 element 组件中可以看见这一个侧边栏是符合我们的要求的 我们就使用这样一个侧边栏动态渲染我们的各个选项但是目前没有接入后端接口我们需要自己先定义静态侧边栏数据然后在使用v-for动态渲染上去 这是我写好的侧边栏动态v-for渲染代码
这里是渲染数据和渲染方法 这里是加上的样式
以上代码不懂的自己查gpt或者查一些ai
CommonAside.vue 完整代码
templateel-aside width200pxel-menu selecthandleMenuSelect background-color#545c64 text-color#fffh3通用后台管理系统/h3el-menu-itemv-foritem in noChildren:indexitem.path:keyitem.pathi :classitem.icon/ispan{{ item.label }}/span/el-menu-itemel-sub-menuv-foritem in hasChildren:indexitem.path:keyitem.pathtemplate #titlei :classitem.icon/ispan{{ item.label }}/span/templateel-menu-itemv-forsubItem in item.children:indexsubItem.path:keysubItem.pathi :classsubItem.icon/ispan{{ subItem.label }}/span/el-menu-item/el-sub-menu/el-menu/el-aside
/templatescript setup
import { ref, computed } from vue;
import { useRouter } from vue-router;const router useRouter();
const list ref([{ path: /home, name: home, label: 首页, icon: el-icon-house, url: Home },{ path: /mall, name: mall, label: 商品管理, icon: el-icon-video-play, url: Mall },{ path: /user, name: user, label: 用户管理, icon: el-icon-user, url: User },{path: /other, label: 其他, icon: el-icon-location,children: [{ path: /page1, name: page1, label: 页面1, icon: el-icon-setting, url: Page1 },{ path: /page2, name: page2, label: 页2, icon: el-icon-setting, url: Page2 }]}
]);const noChildren computed(() list.value.filter(item !item.children));
const hasChildren computed(() list.value.filter(item item.children));const handleMenuSelect (index) {const item list.value.find(item item.path index) ||list.value.flat().find(item item.path index);if (item) {router.push(item.path);}
};
/scriptstyle langless scoped
.icons {width: 18px;height: 18px;margin-right: 5px;
}.el-menu{border-right: none;h3{line-height: 48px;color: #fff;text-align: center;}
}.el-aside{height: 10000px;background-color: #545c64;
}/style为了防止出错重构 Main.vue 代码如下不懂的gpt我认为重要的是整个项目完成的流程
script setup
// 可以在这里添加组件的逻辑
import CommonAside from /components/CommonAside.vue
/scripttemplatediv classcommon-layoutel-containerel-aside width200px classaside-container!-- 侧边栏内容 --common-aside/common-aside/el-asideel-containerel-header classel-headercommon-header/common-header/el-headerel-main classright-mainmain/el-main/el-container/el-container/div
/templatestyle.common-layout{width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
el-container{width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
.el-header{background-color: #333;
}
/style然后就是重新跑项目 如果对于以上代码有问题可以私信我我们的侧边栏就渲染完成了这里有一个bug就是我们的 icon 没有加载出来我还没有发现问题在哪如果你们发现了可以私信我。 紧接着上文我们的项目目前仍然存在侧边栏 icon 加载问题我今天好好的看了一下代码发现展示 icon 的地方代码出了问题
修改bug 这是我修改过的代码
我原本写的展示 icon 使用 标签并且把 icon 的渲染写成了 class 属性里
重构 commonAside.vue 如下
templateel-aside width200pxel-menu selecthandleMenuSelect background-color#545c64 text-color#fffh3通用后台管理系统/h3el-menu-itemv-foritem in noChildren:indexitem.path:keyitem.pathcomponent classicons :isitem.icon/componentspan{{ item.label }}/span/el-menu-itemel-sub-menuv-foritem in hasChildren:indexitem.path:keyitem.pathtemplate #titlecomponent classicons :isitem.icon/componentspan{{ item.label }}/span/templateel-menu-itemv-forsubItem in item.children:indexsubItem.path:keysubItem.pathcomponent classicons :issubItem.icon/componentspan{{ subItem.label }}/span/el-menu-item/el-sub-menu/el-menu/el-aside
/templatescript setup
import { ref, computed } from vue;
import { useRouter } from vue-router;const router useRouter();
const list ref([{ path: /home, name: home, label: 首页, icon: house, url: Home },{ path: /mall, name: mall, label: 商品管理, icon: video-play, url: Mall },{ path: /user, name: user, label: 用户管理, icon: user, url: User },{path: /other, label: 其他, icon: location,children: [{ path: /page1, name: page1, label: 页面1, icon: setting, url: Page1 },{ path: /page2, name: page2, label: 页2, icon: setting, url: Page2 }]}
]);const noChildren computed(() list.value.filter(item !item.children));
const hasChildren computed(() list.value.filter(item item.children));const handleMenuSelect (index) {const item list.value.find(item item.path index) ||list.value.flat().find(item item.path index);if (item) {router.push(item.path);}
};
/scriptstyle langless scoped
.icons {width: 18px;height: 18px;margin-right: 5px;
}.el-menu{border-right: none;h3{line-height: 48px;color: #fff;text-align: center;}
}.el-aside{height: 10000px;background-color: #545c64;
}/style渲染header导航栏
然后我们接着渲染我们的 header 导航栏部分目标是渲染成这样 那么第一步分析界面布局
可以得出以下两个部分也是我们需要分开写的两个部件
首先使用一个 header 把整体包起来 div classheader/div然后我们把导航栏分成左右两部分左边有图标和首页字体右边是用户头像 div classheaderdiv classl-content/divdiv classr-content/div/div然后我们具体实现左右两边的东西 div classheaderdiv classl-content//图标el-button sizesmallcomponent classicons ismenu/component/el-button//面包屑字体el-breadcrumb separator/ classbreadel-breadcrumb-item :to{path:/}首页/el-breadcrumb-item/el-breadcrumb/divdiv classr-content//用户头像el-dropdownspan classel-dropdown-linkimg :srcgetImageUrl(user) classuser//spantemplate #dropdown//单击头像退出按钮el-dropdown-menuel-dropdown-item个人中心/el-dropdown-itemel-dropdown-item退出/el-dropdown-item/el-dropdown-menu/template/el-dropdown/div/div
然后我们加入样式
style langless scoped
.header {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100%;background-color: #333;}.icons {width: 20px;height: 20px;
}.l-content {display: flex;align-items: center;.el-button{margin-right: 20px;}}.r-content {.user{width: 40px;height: 40px;border-radius: 50%;}
}/* 注意:deep() 是一个 Vue.js 中的作用域穿透伪元素用于在 scoped CSS 中访问子组件的样式。但它不是标准的 CSS 语法且在新版本的 Vue.js 中可能已经被废弃或替换。如果这段代码是在 Vue.js 项目中使用的请确保你的项目支持这种语法。此外由于选择器中包含特殊字符如点号和括号你可能需要对其进行适当的转义或使用其他方法来实现相同的效果。但在这里为了保持原始信息的完整性我保留了这段代码的原样。 */
:deep(.bread span) {color: #fff !important;cursor: pointer !important;
}/style再加入渲染数据的代码
script setup
import {ref, computed} from vue;
import {useRouter} from vue-router;const router useRouter();
const list ref([{path: /home, name: home, label: 首页, icon: el-icon-house, url: Home},{path: /mall, name: mall, label: 商品管理, icon: el-icon-video-play, url: Mall},{path: /user, name: user, label: 用户管理, icon: el-icon-user, url: User},{path: /other, label: 其他, icon: el-icon-location,children: [{path: /page1, name: page1, label: 页面1, icon: el-icon-setting, url: Page1},{path: /page2, name: page2, label: 页2, icon: el-icon-setting, url: Page2}]}
]);const getImageUrl (user) {return new URL(../assets/images/${user}.png, import.meta.url).href;
};
/script最后整合代码 CommonHeader.vue代码
templatediv classheaderdiv classl-contentel-button sizesmallcomponent classicons ismenu/component/el-buttonel-breadcrumb separator/ classbreadel-breadcrumb-item :to{path:/}首页/el-breadcrumb-item/el-breadcrumb/divdiv classr-contentel-dropdownspan classel-dropdown-linkimg :srcgetImageUrl(user) classuser//spantemplate #dropdownel-dropdown-menuel-dropdown-item个人中心/el-dropdown-itemel-dropdown-item退出/el-dropdown-item/el-dropdown-menu/template/el-dropdown/div/div/templatescript setup
import {ref, computed} from vue;
import {useRouter} from vue-router;const router useRouter();
const list ref([{path: /home, name: home, label: 首页, icon: el-icon-house, url: Home},{path: /mall, name: mall, label: 商品管理, icon: el-icon-video-play, url: Mall},{path: /user, name: user, label: 用户管理, icon: el-icon-user, url: User},{path: /other, label: 其他, icon: el-icon-location,children: [{path: /page1, name: page1, label: 页面1, icon: el-icon-setting, url: Page1},{path: /page2, name: page2, label: 页2, icon: el-icon-setting, url: Page2}]}
]);const getImageUrl (user) {return new URL(../assets/images/${user}.png, import.meta.url).href;
};
/scriptstyle langless scoped
.header {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100%;background-color: #333;}.icons {width: 20px;height: 20px;
}.l-content {display: flex;align-items: center;.el-button{margin-right: 20px;}}.r-content {.user{width: 40px;height: 40px;border-radius: 50%;}
}/* 注意:deep() 是一个 Vue.js 中的作用域穿透伪元素用于在 scoped CSS 中访问子组件的样式。但它不是标准的 CSS 语法且在新版本的 Vue.js 中可能已经被废弃或替换。如果这段代码是在 Vue.js 项目中使用的请确保你的项目支持这种语法。此外由于选择器中包含特殊字符如点号和括号你可能需要对其进行适当的转义或使用其他方法来实现相同的效果。但在这里为了保持原始信息的完整性我保留了这段代码的原样。 */
:deep(.bread span) {color: #fff !important;cursor: pointer !important;
}/style然后我们启动项目查看如下 这样一个新的组件就被我们写好了。
