封装el-Menu
目前在编写管理端,页面有用到el-Menu,所以对el-Menu做了二次封装, 组件在个人开发使用不错,但不确定能满足各种业务需求,所以这里主要和大家分享一下设计思路。用一次爽一次,一直用越一直爽。
分析问题:
el-Menu是element-ui库的表单组件,如果我们要将其进行二次封装,那么需要考虑几个问题: 样式,颜色,自定义, 最重要的是;递归渲染(不用关心它的子集) 等等.
递归渲染实现。
< template>
< div>
< div v-for = " (item,index) in folder" :key = " index" :class = " [collapse?' collapseBox' :' ' ,mode]" >
< el-submenu v-if = " item.childLabel" :index = " item.index" :disabled = " item.disabled" >
< template slot = " title" >
< i class = " iconfont" :class = " item.icon" > </ i>
< span slot = " title" :class = " collapse?' collapse' :' ' " > {{item.label}}</ span>
</ template>
< treelist :folder = " item.childLabel" > </ treelist>
</ el-submenu>
< el-menu-item v-else = " " :index = " item.index" :disabled = " item.disabled" >
< i class = " iconfont" :class = " item.icon" > </ i>
< span slot = " title" > {{item.label}}</ span>
</ el-menu-item>
</ div>
</ div>
</ template>
< script>
export default {
props : [ "folder" , "mode" , "collapse" ] ,
name : 'treelist' ,
data ( ) {
return {
}
} ,
mounted ( ) {
}
}
</ script>
< style scoped >
>>>.horizontal {
float : left;
}
>>>.horizontal .el-submenu__icon-arrow.el-icon-arrow-down {
position : static;
vertical-align : middle;
margin-left : 8px;
margin-top : 2px;
}
>>>.collapse {
width : 0;
height : 0;
display : block;
overflow : hidden;
}
.collapseBox {
text-align : center;
}
>>>.collapse + .el-icon-arrow-right {
display : none;
}
::v-deep .horizontal {
float : left;
}
::v-deep .horizontal .el-submenu__icon-arrow.el-icon-arrow-down {
position : static;
vertical-align : middle;
margin-left : 8px;
margin-top : 2px;
}
::v-deep .collapse {
width : 0;
height : 0;
display : block;
overflow : hidden;
}
.collapseBox {
text-align : center;
}
::v-deep .collapse + .el-icon-arrow-right {
display : none;
}
</ style>
以上代码配合组件内部代码使用(请看↓↓组件内部)。 详情及组件使用方法:( 请查看《Menu菜单导航API》)。
组件内部template:
< template>
< div class = " menu" >
< el-menu
class = " el-menu-demo"
:mode = " mode"
:collapse = " collapse"
:default-active = " defaultActive"
:default-openeds = " defaultOpeneds"
:unique-opened = " true"
:background-color = " backgroundColor"
:text-color = " textColor"
:active-text-color = " activeTextColor"
:router = " router"
@open = " handleOpen"
@close = " handleClose"
@select = " handleselect"
>
< treelist :folder = " trees" :mode = " mode" :collapse = " collapse" > </ treelist>
</ el-menu>
</ div>
</ template>
< script>
import treelist from './components/treelist'
export default {
name : 'wb-menu' ,
props : {
mode : {
type : String
} ,
collapse : {
type : Boolean
} ,
defaultActive : {
type : String
} ,
defaultOpeneds : {
type : Array,
} ,
router : {
type : Boolean,
} ,
trees : {
type : Array
} ,
backgroundColor : {
type : String,
} ,
textColor : {
type : String,
} ,
activeTextColor : {
type : String,
}
} ,
components : {
treelist
} ,
data ( ) {
return {
}
} ,
methods : {
handleOpen ( index, path ) {
this . $emit ( 'handleOpen' , path) ;
} ,
handleClose ( index, path ) {
this . $emit ( 'handleClose' , path) ;
} ,
handleselect ( index, path ) {
this . $emit ( 'handleselect' , path) ;
} ,
} ,
mounted ( ) {
console. log ( this . defaultActive)
}
}
</ script>
< style scoped >
>>>.el-menu {
border-right : none;
}
::v-deep .el-menu {
border-right : none;
}
>>>.el-menu-vertival-demo:not(.el-menu--collapse) {
width : 200px;
min-height : 400px;
}
::v-deep .el-menu-vertival-demo:not(.el-menu--collapse) {
width : 200px;
min-height : 400px;
}
</ style>