elementui 侧边栏,

　　本文主要介绍element-ui侧边栏的路由器问题，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

element-ui 侧边栏的router

　　所以动态获取api中的路径值作为它的路由器就足够了。注意优越路线。带字符串串联：index=/home/

　　对于二级导航栏，这里的item是v-for循环上层的item.children(一级导航栏)的item。

　　El-menu-item:index= /home/ item . path /El-menu-item

element-ui中侧边栏的分析及实现

el-menu 和 el-submenu

　　1.如果你需要实现一个侧边栏，会怎么设计？

　　2.侧边栏的核心是映射路由器和按照权限过滤的el-menu组件，所以el-menu和el-submenu是理解侧边栏的基础。

　　3.el-menu代表菜单容器组件，如下图所示：

　　默认活动：当前活动菜单的索引。注意，如果有子菜单，需要填写子菜单IDunique-opened。你只保留一个子菜单的扩展模式吗？枚举值，水平/垂直折叠是否水平折叠菜单(仅当模式为垂直时可用)，折叠过渡是否打开折叠动画@选择点击菜单事件，菜单激活回调索引：选中菜单项的索引，IndexPath:选中菜单项的索引路径@open:子菜单展开回调@ @close:子菜单关闭回调4 . El-子菜单，子菜单容器，el-menu代表整个菜单，el-submenu代表特定菜单，但此菜单也包含子菜单。El-submenu可以通过定制槽的标题来定制菜单模式。el-submenu容器中的默认槽用于存储子菜单，子菜单可以包括三个子菜单组件，如下所示：

　　El-menu-item-group:菜单分组，为一组菜单添加标题。el菜单项需要存储在容器中。它支持通过标题槽定制标题样式。el-submenu支持el-submenu的循环嵌套，支持两个以上的子组件实现el-menu-item:子菜单组件示例代码，如下图所示：

　　el-row class=tac

　　el-col :span=12

　　H5默认颜色/h5

　　el菜单

　　默认-活动=2

　　el-menu-vertical-demo

　　@open=handleOpen

　　@close=handleClose

　　El-子菜单索引=1

　　模板槽=标题

　　i class=el-icon-location/i

　　导航1 /span

　　/模板

　　El-菜单-项目-组

　　模板槽=标题分组一/模板

　　El菜单项索引=1-1 选项1/el菜单项

　　El菜单项索引=1-2 选项2/el菜单项

　　/El-菜单项-组

　　El-menu-item-Group title= Group 2

　　El菜单项索引=1-3 选项3/el菜单项

　　/El-菜单项-组

　　El-子菜单索引=1-4

　　模板槽=标题选项4/模板

　　El菜单项索引=1-4-1 选项1/el菜单项

　　/El-子菜单

　　el菜单项索引=2

　　i class=el-icon-menu/i

　　Span slot=title 导航II /span

　　/El-菜单项

　　el菜单项索引=3 已禁用

　　i class=el-icon-document/i

　　Span slot=title 导航III /span

　　/El-菜单项

　　el菜单项索引=4

　　i class=el-icon-setting/i

　　Span slot=title 导航IV /span

　　/El-菜单项

　　/el-menu

　　/el-col

　　el-col :span=12

　　H5定制颜色/h5

　　el菜单

　　默认-活动=2

　　el-menu-vertical-demo

　　@open=handleOpen

　　@close=handleClose

　　background-color=#545c64

　　text-color=#fff

　　active-text-color=#ffd04b

　　El-子菜单索引=1

　　模板槽=标题

　　i class=el-icon-location/i

　　导航1 /span

　　/模板

　　El-菜单-项目-组

　　模板槽=标题分组一/模板

　　El菜单项索引=1-1 选项1/el菜单项

　　El菜单项索引=1-2 选项2/el菜单项

　　/El-菜单项-组

　　El-menu-item-Group title= Group 2

　　El菜单项索引=1-3 选项3/el菜单项

　　/El-菜单项-组

　　埃尔-子菜单索引=1-4

　　模板槽=标题选项4/模板

　　埃尔菜单项索引=1-4-1 选项1/el菜单项

　　/El-子菜单

　　埃尔菜单项索引=2

　　i class=el-icon-menu/i

　　span slot=title 导航二/span

　　/El-菜单项

　　埃尔菜单项索引=3 已禁用

　　i class=el-icon-document/i

　　span slot=title 导航三/span

　　/El-菜单项

　　埃尔菜单项索引=4

　　i class=el-icon-setting/i

　　span slot=title 导航四/span

　　/El-菜单项

　　/el-menu

　　/el-col

　　/el-row

　　脚本

　　导出默认值{

　　方法：{

　　handleOpen(key，keyPath) {

　　console.log(key，key path)；

　　handleClose(key，keyPath) {

　　console.log(key，key path)；

　　}

　　/脚本

sidebar 分析

　　1 .边栏，如下所示：

　　活动菜单：通过meta.activeMenu属性，指定路由对应的高亮菜单，meta.activeMenu需要提供一个合法的路由，否则不能生效isCollapse:NavBar中点击按钮，会修改饼干中的侧边状态，从状态管理取值时会将侧边状态转为布尔型，并判断默认是否需要收缩左侧菜单栏显示徽标：判断设置。射流研究…中的配置项是否需要展示标志；徽标变量：从@ style/变量。半铸钢钢性铸铁(Cast Semi-Steel)中获取半导体色敏传感器对象，从而获取样式2 .侧栏，代码实现如下：

　　模板

　　div:class= { has-logo :show logo }

　　logo v-if= show logo :collapse= is collapse /

　　El-滚动条wrap-class=" scroll bar-wrapper "

　　埃尔菜单

　　:default-active=activeMenu

　　:collapse=isCollapse

　　:background-color=变量。menubg

　　:text-color=variables.menuText

　　:unique-opened=false

　　:active-text-color=变量。菜单活动文本

　　:collapse-transition=false

　　模式=垂直

　　侧栏-item v-for= route in permission _ routes :key= route。“path”:item=“route”:base-path=“route。路径/

　　/el-menu

　　/El-滚动条

　　/div

　　/模板

　　脚本

　　从" vuex "导入{ mapGetters }

　　从导入徽标。/徽标

　　从导入SidebarItem ./SidebarItem

　　从" @/styles/variables.scss "导入变量

　　导出默认值{

　　组件：{ SidebarItem，Logo }，

　　计算值：{

　　.mapGetters([

　　权限_路线，

　　边栏

　　]),

　　activeMenu() {

　　恒定路线=这个.$路线

　　const { meta，path }=route

　　if (meta.activeMenu) {

　　返回meta.activeMenu

　　}

　　返回路径

　　showLogo() {

　　归还这个100美元商店。状态。设置。侧栏标志

　　变量(){

　　返回变量

　　isCollapse() {

　　回归！this.sidebar.opened

　　}

　　/脚本

　　3 .侧栏中通过侧栏项目实现子菜单，侧栏-项目的小道具是项目为路由对象，基本路径是路由路径侧栏-项目的展示逻辑，如下所示：

　　通过项目。隐藏控制菜单是否展示

　　通过hasOneShowingChild(项目。孩子，物品)(！只有一个孩子。孩子只有一个孩子。noshowingchildren)！item.alwaysShow逻辑判断模板菜单是否展示，模板代表单一菜单，如下所示：

　　hasOneShowingChild:判断是否只有一个需要展示的子路由！只有一个孩子。孩子只有一个孩子。禁止显示儿童：判断需要展示的子菜单，是否包含孩子们属性，如果包含，则说明子菜单可能存在孙子菜单，此时需要再判断没有孩子属性！item.alwaysShow:判断路由中是否存在总是显示属性，如何存在，则返回假的，不展示模板菜单，也就是只要配置了总是显示属性就会直接进入埃尔-子菜单组件4.对于hasOneShowingChild方法，儿童是路由器对象的孩子们属性，项目是路由器对象，代码如下所示：

　　hasOneShowingChild(children=[]，parent) {

　　const显示儿童=儿童。过滤器(项目={

　　//如果孩子们中的路由包含隐藏的属性，则返回错误的

　　if (item.hidden) {

　　返回错误的

　　}否则{

　　//将子路由赋值给只有一个孩子，用于只包含一个路由时展示

　　this.onlyOneChild=item

　　返回真实的

　　}

　　})

　　//如果过滤后，只包含展示一个路由，则返回真实的

　　如果(展示孩子。长度===1){

　　返回真实的

　　}

　　//如果没有子路由需要展示，则将独生子女的推设置空路由，并添加没有孩子

　　如果(展示孩子。长度===0){

　　this.onlyOneChild={.父级，路径：，noShowingChildren: true }

　　返回真实的

　　}

　　//返回假的，表示不需要展示子路由，或者超过需要展示的子路由

　　返回错误的

　　}

　　5.对于它们之间的关系，如下所示：

　　如果展示模板组件，首先会展示应用链接组件，然后是埃尔菜单项，最里面嵌套的是项目组件第106 .11项。组件需要自指的中包含标题和图标属性，否则将渲染内容为空的虚拟节点对象。

　　如果模板菜单不展示，则展示埃尔-子菜单菜单，埃尔-子菜单逻辑中采用了嵌套组件的做法，将侧栏项目嵌套在埃尔-子菜单中

　　埃尔-子菜单中的侧栏项目的区别，第一个是传入是巢参数，第二个是传入基本路径参数

　　6 .侧边栏项目，代码如下所示：

　　模板

　　div v-if=！ item.hidden

　　模板v-if= hasOneShowingChild(item。孩子，物品)(！只有一个孩子。孩子只有一个孩子。没有孩子)！” item.alwaysShow

　　app-link v-if= onlyonechild。 meta :to=解析路径(onlyonechild。路径)

　　El-menu-item:index= resolve path(只有一个子级。path):class= { 子菜单-标题-无下拉:isNest}

　　item:icon= onlyonechild。meta。图标 (项目。元项目。meta。icon):title= onlyonechild。meta。标题/

　　/El-菜单项

　　/app-link

　　/模板

　　El-subMenu v-else ref= subMenu :index= resolve path(item。path) popper-附加到正文

　　模板槽=标题

　　item v-if= item。 meta :icon= item。元项目。meta。 icon :title= item。meta。标题/

　　/模板

　　侧栏项目

　　v-for= item。孩子们中的子级

　　:key=child.path

　　:is-nest=true

　　:item=child

　　:base-path=解析路径(子级。路径)

　　嵌套菜单

　　/El-子菜单

　　/div

　　/模板

　　脚本

　　从"路径"导入路径

　　从" @/utils/validate "导入{ isExternal }

　　从导入项目 100元/项

　　从导入应用程序链接

　　从""导入FixiOSBug ./FixiOSBug

　　导出默认值{

　　名称： SidebarItem ，

　　组件：{ Item，AppLink }

　　mixins: [FixiOSBug]，

　　道具：{

　　//路由对象

　　项目：{

　　类型：对象，

　　必填：真

　　isNest: {

　　类型：布尔型，

　　默认值：错误

　　基本路径：{

　　类型：字符串，

　　默认值：""

　　}

　　data() {

　　this.onlyOneChild=null

　　返回{}

　　方法：{

　　hasOneShowingChild(children=[]，parent) {

　　const显示儿童=儿童。过滤器(项目={

　　//如果孩子们中的路由包含隐藏的属性，则返回错误的

　　if (item.hidden) {

　　返回错误的

　　}否则{

　　//将子路由赋值给只有一个孩子，用于只包含一个路由时展示

　　this.onlyOneChild=item

　　返回真实的

　　}

　　})

　　//如果过滤后，只包含展示一个路由，则返回真实的

　　如果(展示孩子。长度===1){

　　返回真实的

　　}

　　//如果没有子路由需要展示，则将独生子女的推设置空路由，并添加没有孩子

　　如果(展示孩子。长度===0){

　　this.onlyOneChild={.父级，路径：，noShowingChildren: true }

　　返回真实的

　　}

　　//返回假的，表示不需要展示子路由，或者超过需要展示的子路由

　　返回错误的

　　resolvePath(routePath) {

　　if (isExternal(routePath)) {

　　返回路线路径

　　}

　　if (isExternal(this.basePath)) {

　　返回this.basePath

　　}

　　返回path.resolve(this.basePath，routePath)

　　}

　　/脚本

　　7.app-link，是一个动态组件，通过到参数，如果包含超文本传送协议(超文本传输协议的缩写)前缀则变成一个a标签，否则变成一个路由器链接组件。

　　8.app-link，代码如下所示：

　　模板

　　组件：is=type v-bind=linkProps(to)

　　插槽/

　　/组件

　　/模板

　　脚本

　　从" @/utils/validate "导入{ isExternal }

　　导出默认值{

　　道具：{

　　收件人：{

　　类型：字符串，

　　必填：真

　　}

　　计算值：{

　　isExternal() {

　　返回isExternal(this.to)

　　type() {

　　如果(this.isExternal) {

　　返回" a "

　　}

　　返回"路由器链接"

　　}

　　方法：{

　　linkProps(to) {

　　如果(this.isExternal) {

　　返回{

　　href:到，

　　目标：" _blank "，

　　版本："诺珀纳"

　　}

　　返回{

　　至：至

　　}

　　/脚本

　　9 .物品组件，通过定义的提出函数完成组件渲染。

　　10项，代码如下所示：

　　脚本

　　导出默认值{

　　名称："菜单项",

　　功能性：真的，

　　道具：{

　　图标：{

　　类型：字符串，

　　默认值：""

　　标题：{

　　类型：字符串，

　　默认值：""

　　}

　　render(h，context) {

　　const { icon，title }=上下文。道具

　　const vnodes=[]

　　如果（图标){

　　如果(图标。包括( El图标){

　　vnodes.push(i class={[icon， sub-el-icon]} /)

　　}否则{

　　vnodes。push(SVG-icon icon-class={ icon }/)

　　}

　　如果（标题){

　　vnodes。push(span slot= title { title)}/span

　　}

　　返回虚拟节点

　　}

　　/脚本

　　样式范围。子埃尔图标{

　　颜色：当前颜色

　　宽度：1em

　　身高：1em

　　}

　　/风格

侧边栏实现总结

　　1 .侧边栏主要包括埃尔菜单容器组件，电子菜单中遍历状态管理中的路线，生成侧栏项目组件侧边栏主要配置如下所示：

　　活动菜单：根据当前路由的meta.activeMenu属性控制侧边栏中高亮菜单isCollapse:根据饼干的侧边状态控制侧边栏是否折叠变量：通过@ style/变量。半铸钢钢性铸铁(Cast Semi-Steel)填充埃尔菜单的基本样式2 .侧边栏项目，分为两个部分，如下所示：

　　第一部分是当只需要展示一个孩子们或者没有孩子们时进行展示，展示的组件包括：

　　应用程序链接：动态组件，路径为链接时，显示为a标签，路径为路由时，显示为路由器链接组件埃尔菜单项：菜单项，当侧栏项目为非筑巢组件时，el菜单项会增加子菜单-标题-不下拉的类项目：el菜单项目里的内容，主要是图标和标题，当标题为空时，整个菜单项将不会展示第二部分是当孩子们超过两项时进行展示，展示的组件包括：

　　埃尔-子菜单：子菜单组件容器，用于嵌套子菜单组件

　　侧栏-项目：el-submen迭代嵌套了侧栏项目组件，在侧栏项目组件中的变化，设置了是巢属性为没错，根据child.path生成了基本路径属性传入侧栏项目组件

　　以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

elementui 侧边栏,

目录