建设网站具备的知识,学校学院网站建设目标,代理注册公司行情,旅游类网站建设的结论为网站提供导航功能的菜单。常用于网站平台顶部或侧边栏菜单导航。 1.如何使用#xff1f;顶栏
/*导航菜单默认为垂直模式#xff0c;通过mode属性可以使导航菜单变更为水平模式。另外#xff0c;在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、… 为网站提供导航功能的菜单。常用于网站平台顶部或侧边栏菜单导航。 1.如何使用顶栏
/*导航菜单默认为垂直模式通过mode属性可以使导航菜单变更为水平模式。另外在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。*/el-menu :default-activeactiveIndex classel-menu-demo modehorizontal selecthandleSelectel-menu-item index1处理中心/el-menu-itemel-submenu index2template slottitle我的工作台/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-itemel-menu-item index2-3选项3/el-menu-itemel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项1/el-menu-itemel-menu-item index2-4-2选项2/el-menu-itemel-menu-item index2-4-3选项3/el-menu-item/el-submenu/el-submenuel-menu-item index3 disabled消息中心/el-menu-itemel-menu-item index4a hrefhttps://www.ele.me target_blank订单管理/a/el-menu-item
/el-menu
div classline/div
el-menu:default-activeactiveIndex2classel-menu-demomodehorizontalselecthandleSelectbackground-color#545c64text-color#fffactive-text-color#ffd04bel-menu-item index1处理中心/el-menu-itemel-submenu index2template slottitle我的工作台/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-itemel-menu-item index2-3选项3/el-menu-itemel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项1/el-menu-itemel-menu-item index2-4-2选项2/el-menu-itemel-menu-item index2-4-3选项3/el-menu-item/el-submenu/el-submenuel-menu-item index3 disabled消息中心/el-menu-itemel-menu-item index4a hrefhttps://www.ele.me target_blank订单管理/a/el-menu-item
/el-menuscriptexport default {data() {return {activeIndex: 1,activeIndex2: 1};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}}
/script
2.侧栏
垂直菜单可内嵌子菜单。
//通过el-menu-item-group组件可以实现菜单进行分组分组名可以通过title属性直接设定也可以通过具名 slot 来设定。el-row classtacel-col :span12h5默认颜色/h5el-menudefault-active2classel-menu-vertical-demoopenhandleOpenclosehandleCloseel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item/el-menu/el-colel-col :span12h5自定义颜色/h5el-menudefault-active2classel-menu-vertical-demoopenhandleOpenclosehandleClosebackground-color#545c64text-color#fffactive-text-color#ffd04bel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item/el-menu/el-col
/el-rowscriptexport default {methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
/script 3.展开折叠
el-radio-group v-modelisCollapse stylemargin-bottom: 20px;el-radio-button :labelfalse展开/el-radio-buttonel-radio-button :labeltrue收起/el-radio-button
/el-radio-group
el-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose :collapseisCollapseel-submenu index1template slottitlei classel-icon-location/ispan slottitle导航一/span/templateel-menu-item-groupspan slottitle分组一/spanel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4span slottitle选项4/spanel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item
/el-menustyle.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
/stylescriptexport default {data() {return {isCollapse: true};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
/script
